8、组件高级玩法：动态组件

正常在父组件中使用子组件的方法是如下：

父组件html模板代码中：

<!--前面的内容-->
...
<child-component></child-component><!--这里直接插入子组件标签，然后标签里面的内容都是固定的-->
...
<!--后面的内容-->

但是如果我们不想这样固定地插入子组件，而是想通过代码动态地创建该如何进行呢？

下面就介绍用代码动态创建组件：

直接看代码：

首先子组件的ts组件类代码：

import { Component, OnInit,Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'child11',
templateUrl: './child11.component.html',
styleUrls: ['./child11.component.scss']
})
export class Child11Component implements OnInit {
// 这里是否使用Input装饰器都没有关系，因为待会会看到在父组件中，并不是通过组件局部变量给子组件传递数据的，而是通过代码创建子组件然后获取子组件实例并且赋值传递数据的
@Input()
public title:string="默认的标题";

@Output()
btnClick:EventEmitter<string>=new EventEmitter<string>();

constructor() { }

ngOnInit() {
}

// 这里是按钮触发的点击事件，可以手动emit自定义的btnClick事件，可以在父组件中使用describe接收到
public triggerEvent():void{
this.btnClick.emit("第一个子组件的点击事件...");
}
}

随后子组件中的html模板代码：

<div class="panel panel-primary">
<!--这里使用到了定义的title属性，可以在父组件中通过代码获取到子组件实例，然后赋值的方式获取-->
<div class="panel-heading">{{title}}</div>
<div class="panel-body">
<!--事件绑定-->
<button class="btn btn-success" (click)="triggerEvent()">触发事件</button>
</div>
</div>

然后查看父组件的html模板代码，以及如何使用子组件的：

<div class="panel panel-primary">
<div class="panel-heading">这是父组件</div>
<div class="panel-body">
<!--给这个div设置组件局部变量，然后在组件ts代码中可以用到，代码创建的子组件就可以插入到这个标记的地方-->
<div #dyncomp></div>
<!--事件绑定-->
<button class="btn btn-danger" (click)="destoryChild()">销毁子组件</button>
</div>
</div>

最后查看父组件的组件类ts代码，具体是如何通过代码创建子组件的：

// 1，首先，要使用代码创建子组件的话，需要导入ViewContainerRef和ComponentFactoryResolver和ComponentRef这几个工具类
import { Component, OnInit,ViewChild,ViewContainerRef,ComponentFactoryResolver, ComponentRef } from '@angular/core';
import { Child11Component } from './child11/child11.component';
import { state } from '@angular/animations';

@Component({
selector: 'dynamic-comp',
templateUrl: './dynamic-comp.component.html',
styleUrls: ['./dynamic-comp.component.scss']
})
export class DynamicCompComponent implements OnInit {
// 2，我们需要使用@ViewChild声明一下，你的子组件需要放在哪里？我们声明的时候就需要用到html中定义的局部变量了
@ViewChild("dyncomp",{read:ViewContainerRef})
dyncomp:ViewContainerRef;

comp1:ComponentRef<Child11Component>;
comp2:ComponentRef<Child11Component>;

// 3，我们需要注入resolver这个实例，后面代码创建子组件需要使用这个实例的resolveComponentFactory方法
constructor(
private resolver:ComponentFactoryResolver) {

}

ngOnInit() {
}

ngAfterContentInit(){
console.log("动态创建组件的实例...");
// 4，使用resolver实例的resolveComponentFactory方法创建一个工厂
const childComp=this.resolver.resolveComponentFactory(Child11Component);
// 5，使用工厂和createComponent方法穿件子组件
this.comp1=this.dyncomp.createComponent(childComp);
// 6，随后可以通过子组件的instance设置对应的属性、获取对应的事件（可以通过事件的subscribe接收）
// this.comp1.instance.title="父层设置的新标题";

// this.comp1.instance.btnClick.subscribe((param)=>{
//   console.log("--->"+param);
// });

//可以创建多个组件实例出来
// let temp1=this.dyncomp.createComponent(childComp);
// temp1.instance.title="第2个动态子组件";
// let temp2=this.dyncomp.createComponent(childComp);
// temp2.instance.title="第3个动态子组件";
// let temp3=this.dyncomp.createComponent(childComp);
// temp3.instance.title="第4个动态子组件";
// let temp4=this.dyncomp.createComponent(childComp);
// temp4.instance.title="第5个动态子组件";
// let temp5=this.dyncomp.createComponent(childComp);
// temp5.instance.title="第6个动态子组件";

/**
* createComponent方法可以调用很多次，会动态创建出多个组件实例
* 方法有第二个参数，表示组件渲染的顺序
*/
this.comp2=this.dyncomp.createComponent(childComp,0);
this.comp2.instance.title="第二个子组件";
}

public destoryChild():void{
this.comp1.destroy();
this.comp2.destroy();
}
}