1. ホーム
  2. angular

[解決済み] 親コンポーネントのangular2呼び出し関数

2023-01-31 20:19:37

質問

私は、ファイルをアップロードすることができるアップロードコンポーネントを持っているアプリを持っています。このコンポーネントは body.component .

アップロード時には、関数(例えば BodyComponent.thefunction() ) を使用する必要があります (データを更新するために呼び出しを行う)。ただし、親コンポーネントが特に body.component . アップロードはまた、異なる動作で他の場所で使用されるかもしれません。

のようなものです。 parent(this).thefunction() のようなものですが、どうすればよいのでしょうか?

どのように解決するのですか?

子コンポーネントにカスタムイベントを作成するのです。このようなものです。

@Component({
  selector: 'child-comp',
  (...)
})
export class ChildComponent {
  @Output()
  uploaded = new EventEmitter<string>();

  uploadComplete() {
    this.uploaded.emit('complete');
  }

親コンポーネントは、このイベントに登録することができます。

@Component({
  template `
    <child-comp (uploaded)="someMethod($event)"></child-comp>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  (...)

  someMethod(event) {
  }
}

もう一つの方法は、子コンポーネントに親コンポーネントを注入することですが、これらは強くリンクされることになります...。