angular 8中组件的动态挂载及传值（组件工厂）

动态工厂dynamic.component.ts代码如下:

import {
    AfterContentInit,
    Component,
    ComponentFactoryResolver,
    ComponentRef,
    Input,
    OnDestroy,
    OnInit,
    ViewChild,
    ViewContainerRef
} from '@angular/core';
import {TypicalSchemeDetailComponent} from '../home-pages/typical-scheme-detail/typical-scheme-detail.component';
import {CaseDetailComponent} from '../home-pages/case-detail/case-detail.component';

@Component({
    selector: 'app-dynamic-component',
    templateUrl: './dynamic.component.html',
    styleUrls: ['./dynamic.component.scss'],
    entryComponents: [TypicalSchemeDetailComponent, CaseDetailComponent]
})
export class DynamicComponent implements OnInit, OnDestroy, AfterContentInit {
    @ViewChild('container', {read: ViewContainerRef, static: true}) container: ViewContainerRef;
    //  需要加载的组件名称；
    @Input() componentName: string;
    @Input() sceneId: number;
    @Input() schemeId: number;
    @Input() caseContent: string;
    compRef: ComponentRef<any>;
    // tslint:disable
    componentMap = {
        'TypicalSchemeDetailComponent': TypicalSchemeDetailComponent,
        'CaseDetailComponent': CaseDetailComponent
    };

    constructor(private resolver: ComponentFactoryResolver) {
    }

    loadComponent() {
        const factory = this.resolver.resolveComponentFactory(this.getComponent(this.componentName));
        if (this.compRef) {
            this.compRef.destroy();
        }
        this.compRef = this.container.createComponent(factory); // 创建组件
        //向动态加载的组件传值 场景Id
        this.compRef.instance['sceneId'] = this.sceneId;
        //向动态加载的组件传值 典型案例Id
        this.compRef.instance['schemeId'] = this.schemeId;
        this.compRef.instance['caseContent'] = this.caseContent;
    }

    ngOnInit() {
    }

    ngAfterContentInit(): void {
        this.loadComponent();
    }

    ngOnDestroy(): void {
        if (this.compRef) {
            this.compRef.destroy();
        }
    }
    getComponent(name: string) {
        if (this.componentMap[name]) {
            return this.componentMap[this.componentName];
        }
    }
}

动态工厂 html代码如下：

<ng-template #container></ng-template>

需要用到的地方进行挂载：比如tabs页

  <nz-tab [nzTitle]="titleTemplate" *ngFor="let tab of tableShow">
                        <ng-template #titleTemplate>
                            <div>
                                {{ tab.title }}
                                <i nz-icon nzType="close" (click)="closeTab(tab.openId)"
                                   class="ant-tabs-close-x"></i>
                            </div>
                        </ng-template>
                        <app-dynamic-component [componentName]="tab.componentName" [sceneId]="sceneId"
                                               [schemeId]="tab.cbzyTypicalSchemeId"
                                               [caseContent]="tab.content"></app-dynamic-component>
                    </nz-tab>

接下来只要是往tableShow变量中添加元素就可以了。
另外，当动态工厂需要向组件中传值的时候，需要用到

        //向动态加载的组件传值 场景Id
        this.compRef.instance['sceneId'] = this.sceneId;
        //向动态加载的组件传值 典型案例Id
        this.compRef.instance['schemeId'] = this.schemeId;
        this.compRef.instance['caseContent'] = this.caseContent;

这是动态工厂中ts的代码，我摘出来，用来记录这个知识点。

子组件去接收的时候只需要声明这个变量，用@Input()去绑定就可以了

 @Input() caseContent = '';
 @Input() schemeId:number ;
 @Input() sceneId:number;