调用子组件的方法

我有一个嵌套的子组件像这样：

<app-main> <child-component /> </app-main> 

我的appMain组件需要在子组件上调用一个方法。

如何在子组件上调用一个方法？

Answer 1

你可以使用一个元素的引用

 @ViewChild('childComponent') child; 

其中childComponent是一个模板variables<some-elem #childComponent >或者

 @ViewChild(ComponentType) child; 

其中ComponentType是组件或指令的types，然后在ngAfterViewInit或事件处理child.someFunc()调用child.someFunc() 。

 ngAfterViewInit() { console.log(this.child); } 

另请参阅模板中的元素

Answer 2

父母和孩子可以通过数据绑定进行通信。

例：

 @Component({ selector: 'child-component', inputs: ['bar'], template: `"{{ bar }}" in child, counter {{ n }}` }) class ChildComponent{ constructor () { this.n = 0; } inc () { this.n++; } } @Component({ selector: 'my-app', template: ` <child-component #f [bar]="bar"></child-component><br> <button (click)="f.inc()">call child func</button> <button (click)="bar = 'different'">change parent var</button> `, directives: [ChildComponent] }) class AppComponent { constructor () { this.bar = 'parent var'; } } bootstrap(AppComponent); 

演示

#f创build对子组件的引用，可以在模板中使用或传递给函数。 来自父母的数据可以通过[ ]绑定来传递。

Answer 3

作为儿子的一部分

 @Component({ // configuration template: `{{data}}`, // more configuration }) export class Son { data: number = 3; constructor() { } updateData(data:number) { this.data = data; } } 

有一个父亲的成分

 @Component({ // configuration }) export class Parent { @ViewChild(Son) mySon: Son; incrementSonBy5() { this.mySon.updateData(this.mySon.data + 5); } } 

在父亲的模板中

 <son></son> <button (click)="incrementSonBy5()">Increment son by 5</button> 

此解决scheme仅适用于父模板中的一个<son></son>实例。 如果您有多个实例，只会在第一个模板中工作。

Answer 4

访问子组件的最好方法是@ViewChild 。

假设您的示例中有一个嵌套的ChildComponent的AppMainComponent。

 // app-main.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-main', template: ` <child-component /> ` }) export class AppMainComponent {} 

你想从你的ChildComponent调用一个清晰​​的方法。

 // child.component.ts import { Component } from '@angular/core'; @Component({ selector: 'child-component', template: '{{ greeting }}' }) class ChildComponent { greeting: String = 'Hello World!'; clear() { this.greeting = null; } } 

您可以通过导入ChildComponent类，ViewChild装饰器和传递组件的类作为查询来完成它。 这样，您将有权访问存储在自定义variables中的ChildComponent接口。 这里是一个例子：

 // app-main.component.ts import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from './components/child/child.component'; @Component({ selector: 'app-main', template: ` <child-component /> ` }) class ChildComponent { @ViewChild(ChildComponent) child: ChildComponent; clearChild() { this.child.clear(); } } 

注意！ 子视图只有在ngAfterViewInit之后才可用 。

在Angular之后进行响应，初始化组件的视图和子视图。 在第一个ngAfterContentChecked（）之后调用一次。 只有组件的钩子。

如果你想自动执行方法，你需要在这个生命周期钩子里面做。

你也可以通过ViewChildren装饰器获得子组件的QueryList 。

 import { Component, ViewChildren, QueryList } from '@angular/core'; import { ChildComponent } from './components/child/child.component'; ... @ViewChildren(ChildComponent) children: QueryList<ChildComponent>; 

QueryList可能是非常有用的，例如你可以订阅儿童的变化。

也可以创build模板引用variables ，并通过ViewChild装饰器访问它们。