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将调用必要的生命周期钩子并启动更改检测机制。

查看以下演示链接

<强> DEMO

使用jquery Angular +2追加组件

1 个答案: