編譯angular2 +組件以動態創建DOM元素

Question

我有一個第三方庫，可以動態創建DOM元素，我需要編譯一個組件並將其插入到創建的DOM元素中。

我正在使用組件工廠解析器，我知道我可以將其插入ViewContainerRef ，但是我不確定如何插入由外部angular lib創建的普通DOM元素。

onDynamicDomCreate: (e: GridChangeEvent) => {
            let factory = this.componentFactoryResolver.resolveComponentFactory(UserDetailsComponent);
            e.sender.element.createComponent(factory); // <--- how to properly create component here?
        }

Answer 1

創建這樣的組件時，您需要傳遞DOM元素：

let factory = this.componentFactoryResolver.resolveComponentFactory(UserDetailsComponent);
const compRef = factory.create(injector, [], e.sender.element);

並在ApplicationRef中注冊創建的視圖，否則您將沒有組件更改檢測：appRef.attachView（compRef.hostView）;