angular - 如何将动态创建的组件插入到模板中

Question

我有使用 ComponentFactoryResolver 动态创建的组件。我想把它插入到模板中。我尝试使用 templateRef 或 viewContainerRef 但没有一个成功。

ComponentOutlet 需要组件类而不是实例， ViewContainerRef 需要模板引用。它们都不适用于创建的实例。

如何使它与创建的组件实例一起工作？有什么办法吗？

解决方案

insert我使用ViewContainerRef 的方法解决了我的问题

标签： angular

Answer 1

您需要对视图容器的引用：

export class ExampleComponent implements AfterViewInit {
@ViewChild('contentElement', { read: ViewContainerRef }) contentElement: ViewContainerRef;
    
    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private ref: ChangeDetectorRef
    ) {}
    
    ngAfterViewInit() {
            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
                yourComponent
            );

            const contentElement = this.contentElement;
            contentElement.clear();
            const component = contentElement.createComponent(componentFactory);
            this.ref.detectChanges();
        }
    }

<ng-template #contentElement></ng-template>