angular 19 學習記錄

吴季分發表於2024-12-05
Angular

引言

一 signal

是什麼？？？

What are signals?
A signal is a wrapper around a value that notifies interested consumers when that value changes. Signals can contain any value, from primitives to complex data structures.
You read a signal's value by calling its getter function, which allows Angular to track where the signal is used.
Signals may be either writable or read-only.

譯：訊號是一個值的包裝器，當該值發生變化時通知感興趣的消費者。訊號可以包含任何值，從原語到複雜的資料結構。
由上可知：

  1. signal 有兩種型別， 一種是可寫的WritableSignal，可改變值，一種是可讀的Signal，不可改變值。
  2. 被signal 包裝的值， 那個值的型別不受限制。
  3. 3 是屬於訂閱者模式，當值發生變化會通知消費者。

signal訊號

可寫的訊號

import {Component, effect, OnInit, signal, WritableSignal} from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: `
                <p>The count is: {{ count() }}</p>
                <button (click)="increment()">Increment</button>
               `,
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  // 建立 signal()
   count: WritableSignal<number> = signal(0);

  ngOnInit(): void {
    // 改變值 .set()
    this.count.set(100);
    console.log(`The current count is: ${this.count()}`);
  }

  increment() {
    // 使用該.update()操作根據前一個值計算出一個新值：
    this.count.update(v => v + 1);
  }

  // 訂閱
  effect = effect(() => {
    // 值每變化一次，執行一次
    // 可在此處作一些邏輯判斷
    console.log(`effect: ${this.count()}`);
  });
}

Kapture 2024-12-05 at 11.40.36.gif

計算訊號（只可讀的訊號）

計算訊號其值來自其他訊號。可以使用computed函式定義計算訊號並指定派生函式。 doubleCount依賴於count()。

const count: WritableSignal<number> = signal(0);
const doubleCount: Signal<number> = computed(() => count() * 2);

計算訊號的依賴性是動態的，可有可無。

const showCount = signal(false);
const count = signal(0);
const conditionalCount = computed(() => {
  if (showCount()) {
    return `The count is ${count()}.`;
  } else {
    return 'Nothing to see here!';
  }
});

signal 和 RxJS 的區別是什麼？

特點SignalRxJS
關注點元件內部狀態非同步資料流
複雜度相對簡單功能強大，但學習曲線陡峭
效能通常效能更好，尤其是在頻繁更新的場景下效能取決於使用的運算子和資料量
適用場景元件內部狀態管理，簡單的非同步操作複雜的非同步操作，構建資料流應用程式

如何在元件銷燬時取消 effect 的訂閱？

effect()返回的是一個EffecrRef型別的物件，可呼叫.destory()方法對其進行銷燬。
image.png

二 component 元件

impotrs

元件不再強制依賴 NgModule，可以獨立存在。
在元件@Component 裝飾器中有imponts， 可匯入元件，指令，管道，模組。這是使用angular 19 版本生成的元件預設standalone為true, 以前是standalone預設為false。
image.png
如果設定standalone為false，元件仍然依賴 NgModule
image.png

selector 選擇器

Angular 指令註解的屬性解釋 看這篇文章就夠了。

Routing 路由

angular 建立新專案後會自動建立兩個檔案 app.config.ts 和app.routers.ts, 可配置使用路由

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import {provideRouter, Routes} from '@angular/router';
import {FirstComponent} from './first/first.component';
import {ViewComponent} from './view/view.component';

const routes: Routes = [
  {
    path: 'first',
    component: FirstComponent, 
    children: [
      {
        path: ':id', 
        component: ViewComponent, 
      },
    ],
  },
  {
    path: 'second',
    loadComponent: () => import('./second/second.component').then(m => m.SecondComponent),
  }
];

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

RouterLink

routerLink 可接收陣列， /path是路徑，剩下的分別是引數

<a [routerLink]="['/path', param1, param2, ...]">連結文字</a>

三 設定HttpClient

不再是以前那樣匯入HttpClientMoudule。有是由provideHttpClient(),提供。

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
  ]
};

總結

1 有非同步操作的話，可考慮使用signal, 可學習一下結合使用signal和RxJS
2 元件單獨化了，不用寫export了。
3 以前的模組，HttpClientModule, RouterModule等，改為provideHttpClient(),provideRouter(routes)形式。

參考文獻

angular官方文件

相關文章