タイトルだけじゃよくわかりませんね。つまりこういうこと。
- AppComponent
- SearchComponent
- FormComponent
- ItemComponent
- LinkComponent
みたいな構造があったときに、Linkでイベントが発生したらItemでとあるメソッドを実行する。とか、ItemからLinkに値を渡すってことはできるようになりました。要は親子関係だったら@Input()
とか@Output()
を使えばいけるのよね。
が、Formで追加したあとに、ItemのViewを更新したいとなった場合、どうやればいいの?って思ったので、調べたことメモ。
↑が参考になりました。テンプレート上でコンポーネントの変数を用意して、同じ階層にいるコンポーネントに渡せば良いのです。
- AppComponent.html
<search></search> <form [itemComponent]="item"></form> <item #item></item>
↑のように変数の宣言(?)は使う後でもおk。一旦全部解析してからリンクする感じなのかな? なんか多用しちゃうと読みづらいコードになりそう。。。
import { ItemComponent } from './item.component'; @Component({ selector: 'form', templateUrl: './form.component.html' }) export class FormComponent { @Input() private itemComponent: ItemComponent // ... }
これで使えるようになりました。