在Angular 9中,父子组件之间调用函数有多种解决方法。以下是其中一种解决方法的示例代码:
父组件(parent.component.ts):
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
callChildFunction() {
this.child.childFunction();
}
}
子组件(child.component.ts):
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
`
})
export class ChildComponent {
childFunction() {
console.log('Child function called from parent component');
}
}
在上面的代码示例中,父组件和子组件之间通过模板引用变量(template reference variable)进行通信。在父组件的模板中,使用#child
定义了一个模板引用变量child,并在按钮的点击事件中调用了childFunction()函数。在子组件的类中,定义了childFunction()函数,用于在控制台输出一条消息。
请注意,通过#child
定义的模板引用变量只能在父组件的模板中使用。如果需要在父组件的类中调用子组件的函数,可以使用ViewChild装饰器和ElementRef。
希望以上解决方法能满足您的需求。