私は、角型アプリケーションにマスターコンポーネントと多くの子コンポーネントを持っています。私は子コンポーネントを使用してレンダリングしています。このようなもの。コンポーネント間のイベントバインディング（角2）
<body class="nav-md">
<mainComponent></mainComponent>
<router-outlet></router-outlet>
</body>
私の主なコンポーネントには、検索ボックスとボタンがあります。 mainComponentのボタンをクリックすると、子コンポーネントの関数を呼び出す必要があります。どんな助けもありがとう。
この場合、ViewChildを使用できます。
例：いずれかを助けることができるように
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from '../child.component';
@Component({
selector: 'mainComponent',
template: '<search (onSearch)="onSearch($event)"></search><child-component></child-component>',
})
export class MainComopnent{
// ViewChild takes a class type or a reference name string.
// Here we are using the type
@ViewChild(ChildComponent) child: ChildComponent;
onSearch(search: string) {
this.child.say(search);
}
}
@Component({
selector: 'child-component'
})
export class ChildComponent {
say(something: string) {
console.log(something);
}
}
は、主成分と子コンポーネントのHTML \ TSコードを追加してください。 –