如何在没有预先确定的 ViewContainerRef 的情况下向 DOM 动态添加角度组件？

Posted 2023-03-13

【中文标题】如何在没有预先确定的 ViewContainerRef 的情况下向 DOM 动态添加角度组件？

【英文标题】：How to dynamically add angular components to the DOM without a pre-determined ViewContainerRef?

【发布时间】：2019-09-07 19:03:06

【问题描述】：

这是我认为对其他人有用的解决方案。

这可以应用于任何未设置 ViewContainerRef 的原生元素。

我正在尝试在单击事件时在表格 (Tabulator v4.2) 中植入角度组件。该表是由插件动态创建的，因此我无法访问需要为其设置角度 ViewContainerRef 的 DOM 元素。 在点击事件回调中，我可以访问要添加角度组件的元素。

如何在没有设置角度 ViewContainerRef 的情况下将角度组件添加到该元素？

每次点击都应创建一个新组件并将其设置在给定的 DOM 元素中。

【参考方案1】：

我使用 Angular 渲染器和 Angular 动态组件解决了这个问题。 Angular Dynamic Component Loader

父组件 HTML

<ng-template #willContainTheChildComponent></ng-template>

父组件类

@ViewChild('willContainTheChildComponent', read: ViewContainerRef) willContainTheChildComponent: ViewContainerRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver,
    private renderer: Renderer2) 




//The click handler
            onClick: (e, row) => 
                const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TheComponentClass);
                const component = this.willContainTheChildComponent.createComponent(componentFactory);
                //Here I have access to component.instance to manipulate the class' contents
                this.renderer.appendChild(row.getElement(), component.location.nativeElement);
            

【讨论】：

谢谢，这对 Angular 中的 Tabulator 非常有用。很好的解决方案！

您要求解决方案“没有预先确定的 ViewContainerRef”，但 <ng-template #willContainTheChildComponent></ng-template> 是预先确定的 ViewContainerRef。那为什么要用渲染器重新发明***呢？

@Dimanoid 我需要它能够实例化一个角度组件。有没有办法从回调中立即在给定元素中设置角度组件？