在Angular 6中,可以使用@Input
和@Output
装饰器来实现动态创建组件之间的双向通信。
以下是一个示例,演示了如何在动态创建的组件之间实现双向通信:
首先,创建一个动态组件ChildComponent
,其中包含一个输入属性message
和一个输出属性messageChange
:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Input() message: string;
@Output() messageChange: EventEmitter = new EventEmitter();
onMessageChange() {
this.messageChange.emit(this.message);
}
}
然后,创建一个父组件ParentComponent
,在该组件中创建子组件ChildComponent
的实例,并在父组件中处理子组件的messageChange
事件:
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';
import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
childComponentRef: any;
constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}
createChildComponent() {
const childComponentFactory = this.resolver.resolveComponentFactory(ChildComponent);
this.childComponentRef = this.container.createComponent(childComponentFactory);
this.childComponentRef.instance.message = 'Hello from parent component';
this.childComponentRef.instance.messageChange.subscribe((message: string) => {
console.log('Message from child component:', message);
});
}
}
在上面的示例中,我们首先使用ComponentFactoryResolver
和ViewContainerRef
来创建ChildComponent
的实例,并将其添加到父组件的#childContainer
子元素中。
然后,我们通过this.childComponentRef.instance.message
来设置子组件的输入属性message
的值。
最后,我们通过订阅子组件的messageChange
事件来监听子组件的输出属性messageChange
的变化,并在父组件中处理该事件。
使用上述代码示例,当点击“创建子组件”按钮时,将创建一个子组件,并将父组件中的文本输入框中的值传递给子组件。当在子组件中更改文本输入框的值时,父组件会打印出子组件的新值。
希望对你有所帮助!