Effective Angularの第2章の後半のまとめ

Effective Angular

Effective Angularの第2章のRouterまでのまとめ
の続編
Effective Angular: Develop applications of any size by effectively using Angular with Nx, RxJS, NgRx, and Cypress
を購入したマスタカ

2章の後半を読んだのでその感想

@Input
・コンポーネント間での受け渡し

@Input() navbarItms: NavbarItem[] = [];
//デフォルトなしでnon-nullの場合は!
@Input() navbarItms!: NavbarItem[];

・setterを隠す

private _navItems: NavbarItem[] = [];

@Input()
set navbarItems(valuie: NavbarItem[]) {
    this._navItems = valuie
}

get navbarItems(): NavbarItem[] {
    return this._navItems;
}

・setter後に処理を入れる

@Input({transform: addHome}) navbarItems: NavbarItem[] = [];

function addHome(items: NavbarItem[]) {
    return [{ label: 'home', route: '/'}, ...items]
}

・required
@Input({required: true})で必須にできる
https://angular.jp/guide/components/inputs

・ngOnChanges
データの受け渡しをhookできる
https://qiita.com/ksh-fthr/items/ccd9861f919c4aa30ae8

・two-way binding
[()]
https://angular.dev/guide/templates/two-way-binding
formの場合はngModelを使う
https://angular.dev/guide/directives#displaying-and-updating-properties-with-ngmodel
https://qiita.com/Dera04/items/477b149ea0bc5e39ef2a
Route
・ActivatedRoute
ここからパラメーターを取れる
https://qiita.com/okomeme/items/f38dd3f8c454607431e1

constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot);
    console.log(this.route.snapshot.queryParamMap.get('b'));
    this.route.queryParams.subscribe(params =>{
        console.log(params) 
    });
}

DI
・applicaionでprovide

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(appRoutes),
        [SampleService]
    ],
};

・propertyをDIする
https://angular.jp/guide/di/dependency-injection-providers

//URLはたぶんコメント
export const BASE_URL = new InjectionToken<string>('URL');
{provide: BASE_URL, useValue: "www.yahoo.co.jp"}
constructor(@Inject(BASE_URL)a: string) {}

Effective Angular

Pocket

関連記事: