1. ホーム
  2. アンギュラー

[解決済み】angular2で他のコンポーネントの関数を呼び出す方法

2022-04-08 12:26:58

質問

以下のような2つのコンポーネントがあり、別のコンポーネントから関数を呼び出したいと思っています。両方のコンポーネントは、ディレクティブを使用して3番目の親コンポーネントに含まれています。

コンポーネント1

@component(
    selector:'com1'
)
export class com1{
    function1(){...}
}

コンポーネント 2:

@component(
    selector:'com2'
)
export class com2{
    function2(){...
        // i want to call function 1 from com1 here
    }
}

を使ってみました。 @input@output が、その使い方や関数の呼び出し方がよくわからないのですが、どなたか教えていただけませんか?

解決方法は?

com1 と com2 が兄弟である場合、以下のように使用することができます。

@component({
  selector:'com1',
})
export class com1{
  function1(){...}
}

com2 は EventEmitter

@component({
  selector:'com2',
  template: `<button (click)="function2()">click</button>`
)
export class com2{
  @Output() myEvent = new EventEmitter();
  function2(){...
    this.myEvent.emit(null)
  }
}

ここでは、親コンポーネントがイベントバインディングを追加して、次のイベントをリッスンします。 myEvent のイベントが発生し、その後に com1.function1() そのような事態が発生した場合 #com1 はテンプレート変数で、テンプレート内の他の場所からこの要素を参照することができます。するために使用しています。 function1() のイベントハンドラです。 myEvent または com2 :

@component({
  selector:'parent',
  template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}

コンポーネント間の通信を行うためのその他のオプションについては、以下を参照してください。 コンポーネントインタラクション