调用子组件的方法

我有一个嵌套的子组件，如下所示:

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

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

如何调用子组件上的方法？

70187 次浏览
小开

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

例如:

@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创建对子组件的引用，可以在模板中使用，也可以传递给函数。来自父级的数据可以通过 [ ]绑定传递。

小开
最佳答案

您可以使用

@ViewChild('childComponent') child;

其中 childComponent是模板变量 <some-elem #childComponent >’或

@ViewChild(ComponentType) child;

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

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

参见 获取模板中的元素

小开

作为儿子的一部分

@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>

此解决方案只适用于父模板中的一个 <son></son>实例。如果您有一个以上的实例只将工作在第一个模板之一。

小开

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

让我们假设您拥有来自您的示例的带有嵌套的 ChildComponent 的 AppMainComponent。

// app-main.component.ts
import { Component } from '@angular/core';


@Component({
selector: 'app-main',
template: `
<child-component />
`
})


export class AppMainComponent {}

您希望从 ChildComponent 调用一个 clear 方法。

// 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 修饰符并将组件的类作为查询传递到其中来实现它。这样，您就可以访问存储在自定义变量中的 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装饰器获得子组件的 查询列表。

import { Component, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './components/child/child.component';


...


@ViewChildren(ChildComponent)
children: QueryList<ChildComponent>;

QueryList 可能非常有用，例如，您可以订阅子级更改。

也可以创建 模板引用变量并通过 ViewChild 装饰器访问它们。


提交答案