在Angular中,可以使用EventEmitter和@ViewChild装饰器来解决父子组件之间在模态窗口中的通信问题。以下是解决方法的示例代码:
父组件:
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
@ViewChild('childComponent') childComponent: ChildComponent;
openModal() {
// 打开模态窗口代码...
this.childComponent.showData();
}
}
子组件:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{ data }}
`
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter();
data: string;
showData() {
this.data = 'Hello from child component';
this.dataEvent.emit(this.data);
}
}
在这个例子中,当父组件的按钮被点击时,它会调用子组件的showData()
方法,并传递数据给子组件。子组件会将数据显示在模态窗口中。使用@ViewChild
装饰器,父组件可以访问子组件的实例,并调用子组件的方法。
在父组件的模板中,使用了#childComponent
来引用子组件的实例,并绑定到childComponent
属性上。然后在openModal()
方法中,通过this.childComponent
可以调用子组件的showData()
方法。
在子组件中,使用了@Output
装饰器来定义一个输出属性dataEvent
,它是一个事件发射器。在showData()
方法中,子组件设置了data
属性的值,并通过dataEvent.emit()
方法发射data
属性的值给父组件。
这样,父组件就可以在模态窗口弹出之后,获取到子组件传递的数据,并在模态窗口中显示出来。
上一篇:Angular通配符匹配子路由