Question

我有一个充当搜索栏的组件。它可以通过@Output和EventEmitter发出api请求并将结果提供给应用程序的其余部分，但我也想要一个函数转向其他方式。搜索栏组件会保留其搜索的历史记录，我希望为父组件提供清除历史记录的方法。我能想到的最好的方法是以某种方式从父组件调用我的搜索栏中的方法。

我提出的最好的（但是还没有能够正确实施）是尝试将EventEmitter传递到我的搜索栏，并且孩子订阅了父母＆＃39事件。 @Input在构造函数完成时尚未完成绑定，因此实际执行此操作变得棘手。

我想我可以尝试将历史存储在父组件中，但搜索栏是组件的原因是因为它会出现在多个地方，这不符合关注点分离所以它似乎是最好的将历史记录保留在搜索栏组件中。

父Component如何在子Component上调用函数？

Answer 1

事实证明，我可以在组件上放置一个局部变量，并可以访问它的公共功能。即：

<search-bar #SearchBar ...></search-bar>
<button (click)='SearchBar.ClearHistory()' ...></button>

显然，局部变量绑定到Component而不是像我原先认为的那样绑定到DOM。我想我可以访问所有公共领域和功能。

Answer 2

您需要利用ElasticClient.Bulk(IBulkRequest)装饰器通过注入引用父组件中的子组件：

@ViewChild

这是更新的plunkr：http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview。

您可以注意到也可以使用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(); } }参数装饰器：

@Query

希望它可以帮到你，亨利

在子Angular2组件中调用函数？

2 个答案: