在子Angular2组件中调用函数？

发布时间：2020-12-17 07:55:46 所属栏目：安全来源：网络整理

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

我有一个充当搜索栏的组件.它可以通过@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();
  }

  (...)
}

希望它能帮到你,蒂埃里

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!