一、理解angular组件

组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构，这样他能简单地写app，通过类似的web Component 或者angular2的样式。web Component 是一个规范。马上就要成为标准。

应用组件的优点：

不用组建的情况:

二、动态创建组件

说了这么多，先来个例子吧。

上面那张图很简单就是一个输入文本的一个弹框。

下面这个就有点复杂了，有数据传入，事件绑定等

主了调用起来方便，我把这些都封装成了一个方法：三个参数

 Utility.$ShowDialogComponent('ComponentName', {
 Params1,Params2...
 }, {
 onEventName1:()=>{},
 ...
 });

由于我动态创建的组件都是以弹框形式出来，所以我把动态创建的步骤放到了，弹框组件里。

创建Dialog.ts，文件，

@Component({
 selector: 'xtn-mode-dialog',
 templateUrl: './Dialog.html',
 styleUrls: ['./Dialog.scss'],
 animations: [ // 弹框的添加一个动画效果，由小到大显示，关闭时候，由大小到最后不见了。
 trigger('TriggerState', [
 state('inactive', style({ transform: 'scale(0.1)' })),
 state('active', style({ transform: 'scale(1)' })),
 transition('inactive => active', animate('150ms ease-in')),
 transition('active => inactive', animate('150ms ease-out')),
 ])
 ]
})
export class XtnDialog implements OnInit, OnDestroy, OnChanges, AfterContentChecked, AfterContentInit {
 // 依赖注入动态创建组件的工厂类
 constructor(private resolver: ComponentFactoryResolver) {
 }
 // 内容检查，主要是判断是打开还是关闭弹框。
 ngAfterContentChecked(): void {}
 // 销毁操作
 ngOnDestroy(): void {}
 // 这里就是动态创建的组件地方法
 LoadComponent(self:any){}
 ngAfterContentInit(): void {}
 ....
}

就不把代码张贴里了，查看全部代码可以点击这里展示出几个方法吧，具体详情可能点击

总结