在子 Angular2 组件中调用函数？

Question

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

我想出的最好方法（但无法正确实施）是尝试将EventEmitter 传递到我的搜索栏，然后孩子订阅父母的事件。 @Input 在构造函数时尚未完成绑定，因此实际执行此操作会很棘手。

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

父组件如何调用子组件上的函数？

Answer 1

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

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

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

Answer 2

您需要利用@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();
  }

  (...)
}

希望对你有帮助 蒂埃里