Angular
コンポーネントの相互作用
Inputデコレーター
入力プロパティとも言うようだ
親コンポーネントから値を受け取る
@Input('alias')で、親コンポーネントから指定できるエイリアスを設定できる
ゲッター(get)、セッター(set)を設定できる
OnChangesライフサイクルで、入力プロパティの変更を監視し、ngOnChangesを実行できる
頻繁に実行される可能性があるため、パフォーマンスに影響するため要注意
@Outputデコレーター
出力プロパティとも言うようだ
親コンポーネントに値を渡す
EventEmitterで、子コンポーネントから親コンポーネントへ何かの通知を行う
親コンポーネントでは、EventEmitterからの通知を受け取って、何かしらのメソッドを実行する
親から子への相互作用
ローカル変数
テンプレート内でのみ利用できる
つまり、コンポーネントのクラス内でないと出来ない処理だった場合には、利用が出来ない
親コンポーネントで、ローカル変数(<a-component #localVariable>)を使うことで、子コンポーネントのメソッドとかプロパティにアクセスができるようになる。
つまり、親コンポーネントのボタンのイベントで、直接子コンポーネントのメソッドを実行できる
子コンポーネントのプロパティを表示できる
@ViewChild()
ローカル変数では実現できない、コンポーネントのクラス内で実現したい処理があった場合に利用できる
ViewChild デコレーター
子コンポーネントを参照するためのプロパティ
AfterViewInit ライフサイクルフック
ngAfterViewInitで、親コンポーネントが描画された後(子コンポーネントも表示?構築されている状態)に何かしらの処理を実行させる
スタンドアローンコンポーネント
今までModuleに書いていた、インポートとかを、各コンポーネントの方で書けるようになった感じ?
Moduleにたくさんコンポーネントを書いていたけど、それが回避される。
ビューのカプセル化
コンポーネントのスタイルのカプセル化にはモードがある
ShadowDom
Emulated
CSSセレクターで、カプセル化を実現する
スコープ化されたスタイル
None
カプセル化を適用しない
通常のCSSなどでのスタイル適用と同じ、カスケーディングが適用される
コンポーネントごとに設定