angular4系列之动态创建组件

Angular如何在组件中动态加载组件

参考博客1 参考博客2 参考博客3

找到宿主页面

• 在Angular中，我们通常需要一个宿主（Host）来给动态加载的组件提供一个容器。这个宿主在Angular中就是<ng-template>
  ### 创建为组件提供容器的指令

import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
    selector: '[dl-host]'
})
export class DlHostDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

• 这里注入了一个ViewContainerRef的服务，它的作用就是为组件提供容器，并且提供了一系列的管理这些组件的方法。
• 可以在宿主ts模块文件中通过@ViewChild获取到dl-host的实例，因此进而获取到其中的ViewContainerRef

@ViewChild(DlHostDirective) dlHost: DlHostDirective;

宿主文件的ts文件中

• 引入指令
• 引入需要动态创建的组件
• 创建组件的工厂，引入ComponentFactoryResolver服务
• 具体代码如下

import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { DlHostDirective } from './dl-host.directive';
import { AComponent } from './a/a.component';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
    @ViewChild(DlHostDirective) dlHost: DlHostDirective;
    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

    ngAfterViewInit() {
        this.dlHost.viewContainerRef.createComponent(
            this.componentFactoryResolver.resolveComponentFactory(AComponent)
        );
    }
}

在.module.ts中将需要生成的组件注册为一个@NgModule.entryComponent

@NgModule({
    entryComponents: [AComponent]
})

• entryComponents是所有通过类型进行命令式加载的组件都是入口