web-dev-qa-db-ja.com

Angular 2-親から子のメソッドをトリガーする方法

@Inputを介して親から子にデータを送信したり、@ Outputを使用して子から親のメソッドを呼び出したりすることは可能ですが、その逆の方法を実行します。親からの子。基本的にそのようなもの：

@Component({
  selector: 'parent',
  directives: [Child],
  template: `
<child
  [fn]="parentFn"
></child>
`
})
class Parent {
  constructor() {
    this.parentFn()
  }
  parentFn() {
    console.log('Parent triggering')
  }
}

そして子：

@Component({
  selector: 'child',
  template: `...`
})
class Child {
  @Input()
  fn() {
    console.log('triggered from the parent')
  }

  constructor() {}
}

バックグラウンドは一種の「取得」リクエストです。つまり、子から最新のステータスを取得します。

これで、サービスとSubject/Observableでそれを達成できることがわかりましたが、もっと簡単なものはないのではないかと思いました。

angulartypescriptinputcomponentsoutput
47
Christophe Vidal

これらはあなたが探しているものだと思う：

https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

https://angular.io/guide/component-interaction#parent-calls-an-viewchild

テンプレート内のローカル変数を使用するか、親のコンポーネントクラスの@ViewChildデコレータを使用して、子のプロパティとメソッドにアクセスできます。

53
awiseman

@ViewChildは正しい解決策ですが、上記のリンクされたドキュメントは私には少し不明瞭だったので、それを理解するのに役立つもう少しわかりやすい説明を渡します。

メソッドでChildComponentを使用してみましょう：

whoAmI() {
  return 'I am a child!!';
}

そして、 '@ ViewChild`テクニックを使用して上記のメソッドを呼び出すことができる親コンポーネント：

import { Component, ViewChild, OnInit } from '@angular/core';

import { ChildComponent } from './child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  @ViewChild(ChildComponent) child: ChildComponent;

  ngOnInit() {
    console.log(this.child.whoAmI()); // I am a child!
  }
}
22
mpro