在子Angular2组件中调用函数？

Question

我有一个充当搜索栏的组件.它可以使API请求,并经由一个结果提供给应用程序的其余部分@Output和EventEmitter,但我也希望有一个函数来走另一条路.搜索栏组件保留其搜索的历史记录,我想为父组件提供清除历史记录的方法.我能想到的最好的方法是以某种方式从父组件调用我的搜索栏中的方法.

我提出的最好的(但无法正确实现)是尝试传递EventEmitterINTO我的搜索栏,孩子订阅父母的事件.在@Input还没有完成,但这样它变得棘手真正做到这一点的时候构造结合.

我想我可以尝试,并存储在父组件的历史,但原因的搜索栏是一个组件,是因为它会出现在多个地方,这不符合关注点分离适合这样看来最好保持在历史搜索栏组件.

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

Answer 1

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

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

显然,局部变量绑定到Component而不是像我原先认为的那样绑定到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();
  }

  (...)
}

希望它对你有帮助,蒂埃里