子コンポーネントの親コンポーネント関数を角で呼び出す

Question

子コンポーネントの親コンポーネントにあるclose()関数を角で呼びそそうとしています。ここで

はPlunkerに私のコードは、私は私の子コンポーネントに直接機能をコンポーネントをインポートし、呼び出そうとしましたが、私はこのエラーを取得：私はこの問題を解決するにはどうすればよい「近い」未定義

のプロパティを読み取ることができませんか？

Answer 1

私は、あなたが遭遇する可能性の両方の場合に完全な答えを与えることを試みます。

ケース1：あなたは、単に使用してこれを達成することができ、親コンポーネント

から子関数の呼び出しを親コンポーネントテンプレート内の子コンポーネントを参照するための子セレクタのテンプレート変数。次に、その参照を使用してすべてのpublic関数またはプロパティを呼び出すことができます。

ので、あなたの子コンポーネントには、関数だ：

test(){ 
console.log(`this is a test`); 
} 

をし、あなたの親コンポーネントで、あなたはちょうどこのようにボタンのクリック後に言わせてあなたの親コンポーネントでそれを呼び出すことができます。

<child-component #childRef></child-component> 
<button (click)="childRef.test()">Call the child test function</button> 

ケース2：子コンポーネントから親関数を呼び出すには、

これは、ヨーヨーのようにあなたのユースケース次第ですケースです親コンポーネントを子コンポーネントに挿入して上記と同じようにすることはできますが、親子または親子関係にはなりませんが、両方のコンポーネントが強くリンクされることはまれです。または、@Outputデコレータを使用してデータを渡し、渡されたデータを消費する子で関数を作成することで、同じ結果を得ることができます。

子コンポーネントでは、 ：あなたの親テンプレートで

@Output() childEvent = new EventEmitter(); 
test(){ 
this.childEvent.emit('this is a test'); 
} 

<child-component (childEvent)="test(message)"></child-component> 

してからコンポーネント内

test(msg){ 
console.log(msg); 
}