我有一个充当搜索栏的组件.它可以通过@Output和EventEmitter发出api请求并将结果提供给应用程序的其余部分,但我还想要一个函数转向其他方式.搜索栏组件保留其搜索的历史记录,我想为父组件提供清除历史记录的方法.我能想到的最好的方法是以某种方式从父组件调用我的搜索栏中的方法.
我提出的最好的(但是无法正确实现)是尝试将EventEmitter传递到我的搜索栏中,并且子节点订阅了父节点的事件. @Input在构造函数时尚未完成绑定,因此实际执行此操作变得棘手.
我想我可以尝试将历史存储在父组件中,但搜索栏是组件的原因是因为它会出现在多个地方,这不符合关注点分离所以最好保留历史记录搜索栏组件.
您需要利用@ViewChild装饰器通过注入引用父组件中的子组件：
import { Component,ViewChild } from 'angular2/core';
(...)
@Component({
selector: 'my-app',template: `
<h1>My First Angular 2 App</h1>
<child></child>
<button (click)="submit()">Submit</button>
`,directives:[App]
})
export class AppComponent {
@ViewChild(SearchBar) searchBar:SearchBar;
(...)
someOtherMethod() {
this.searchBar.someMethod();
}
}
这是更新的plunkr：http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview.
您可以注意到也可以使用@Query参数装饰器：
export class AppComponent {
constructor(@Query(SearchBar) children:QueryList<SearchBar>) {
this.childcmp = children.first();
}
(...)
}
希望它能帮到你,蒂埃里
