将angular2 +组件编译为动态创建的DOM元素

Question

我有一个动态创建DOM元素的第三方库，我需要编译一个组件并将其插入到创建的DOM元素中。

我使用组件工厂解析器，我知道我可以将其插入ViewContainerRef，但我不确定如何插入由外部角度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）;