在Angular 7中,可以通过使用@ViewChild装饰器来从孙子组件调用方法。
首先,在父组件中,使用@ViewChild装饰器来获取孙子组件的实例。在父组件的类中,声明一个ViewChild属性,并指定孙子组件的类型。例如,假设孙子组件的名称为GrandchildComponent:
import { Component, ViewChild } from '@angular/core';
import { GrandchildComponent } from './grandchild.component';
@Component({
selector: 'app-parent',
template: `
<app-child></app-child>
`
})
export class ParentComponent {
@ViewChild(GrandchildComponent) grandchild: GrandchildComponent;
callGrandchildMethod() {
this.grandchild.someMethod();
}
}
然后,在孙子组件中,定义一个公共方法,供父组件调用。例如,假设孙子组件中有一个名为someMethod的方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-grandchild',
template: `
<p>Grandchild Component</p>
`
})
export class GrandchildComponent {
someMethod() {
console.log('Method called from grandchild component');
}
}
最后,在父组件的模板中,通过调用父组件的方法来触发孙子组件的方法。例如,在父组件的模板中添加一个按钮,并绑定到父组件的callGrandchildMethod方法:
<button (click)="callGrandchildMethod()">Call Grandchild Method</button>
当点击按钮时,父组件的callGrandchildMethod方法会被调用,从而触发孙子组件的someMethod方法。
这是一个简单的示例,展示了如何从Angular 7中的孙子组件调用方法。根据具体的业务需求,你可以在实际项目中进行适当的调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云