使用 jquery Angular +2 追加组件

Question

在

Angular +2 中可以做到这一点吗？

export class AppComponent {
    loadSomething()
    {
        $(.container).append('<app-test></app-test>');
    }
}

如果不是，正确的方法是什么？

Answer 1

动态加载组件的最佳方法是使用 ComponentFactoryResolver 和 ViewContainerRef

export class HomeComponent {
    constructor(private componentFactoryResolver: ComponentFactoryResolver,
                private viewContainerRef: ViewContainerRef) {
    }
    private  loadSomething()() {
        const factory = this.componentFactoryResolver.resolveComponentFactory(AppTestComponent);
        const ref = this.viewContainerRef.createComponent(factory);
        ref.changeDetectorRef.detectChanges();
    }
}

• ComponentFactoryResolver — 用于获取要注入的组件的工厂
的服务
• ViewContainerRef — 组件父级的容器。createComponent(factory( 是实际将我们的组件注入到调用它的 viewContainerRef 中的部分
• ref — 我们刚刚注入的组件的引用。我们在其上调用 detectChanges，因此 angular 将调用必要的生命周期钩子并启动更改检测机制。

查看以下演示链接

演示