在Angular 12中,要将数据传递到动态加载的组件,可以通过以下步骤实现:
下面是一个示例代码:
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';
@Component({
selector: 'app-parent',
template: `
<div #container></div>
`,
})
export class ParentComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
loadDynamicComponent(data: any) {
// 获取动态组件的工厂类
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
// 创建组件实例
const componentRef = this.container.createComponent(componentFactory);
// 设置输入属性值
componentRef.instance.data = data;
}
}
在上面的示例中,ParentComponent是父组件,DynamicComponent是动态加载的组件。通过ViewChild装饰器获取到容器元素的引用,然后使用ComponentFactoryResolver来创建动态组件的实例。最后,通过设置组件实例的data属性来传递数据。
请注意,上述示例中的DynamicComponent是一个自定义的组件,你需要根据实际需求来创建和定义该组件。
希望以上信息对你有帮助!如果有任何疑问,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云