ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

【Angular2】親子じゃない同じ階層にいるComponentのメソッドを使いたいとき

スポンサードリンク

タイトルだけじゃよくわかりませんね。つまりこういうこと。

  • AppComponent
    • SearchComponent
    • FormComponent
    • ItemComponent
      • LinkComponent

みたいな構造があったときに、Linkでイベントが発生したらItemでとあるメソッドを実行する。とか、ItemからLinkに値を渡すってことはできるようになりました。要は親子関係だったら@Input()とか@Output()を使えばいけるのよね。

が、Formで追加したあとに、ItemのViewを更新したいとなった場合、どうやればいいの?って思ったので、調べたことメモ。

stackoverflow.com

↑が参考になりました。テンプレート上でコンポーネントの変数を用意して、同じ階層にいるコンポーネントに渡せば良いのです。

  • 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
  // ...
}

これで使えるようになりました。