如何在没有预先确定的 ViewContainerRef 的情况下将 angular 组件动态添加到 DOM？

Question

这是我发现的一个解决方案，我认为对其他人有用。
这可以应用于任何未设置 ViewContainerRef 的原生元素。

我试图在单击事件中将 angular 组件植入 table (Tabulator v4.2) 中。 table 是由插件动态创建的，因此我无法访问需要为其设置 angular ViewContainerRef 的 DOM 元素。在点击事件回调中，我可以访问我希望将 angular 组件添加到的元素。

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

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

Answer 1

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

父组件HTML

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

父组件class

@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);
            }

如何在没有预先确定的 ViewContainerRef 的情况下将 angular 组件动态添加到 DOM？

How to dynamically add angular components to the DOM without a pre-determined ViewContainerRef?

javascript

dom

angular

angular-dynamic-components