angular使用动态组件后属性值_Angular4 动态加载组件

最近接手了一个项目，客户提出了一个高大上的需求：要求只有一个主界面，所有组件通过Tab来显示。其实这个需求并不诡异，不喜欢界面跳转的客户都非常热衷于这种展现形式。

好吧，客户至上，搞定它！这种实现方式在传统的HTML应用中，非常简单，只是在这Angular4(以下简称ng)中，咋个弄呢？

我们先来了解下ng中动态加载组件的两种方式：

加载已经声明的组件： 使用ComponentFactoryResolver，将一个组件实例呈现到另一个组件视图上；

动态创建组件并加载：使用ComponentFactory和Compiler，创建和呈现组件

根据我们的需求，各个组件是事先开发好的，需要在同一个组件上显示出来。所以第一种方式符合我们的要求。

使用ComponentFactoryResolver动态加载组件，需要先了解如下概念：

ViewChild：属性装饰器，通过它可以获得视图上对应的元素；

ViewContainerRef：视图容器，可在其上创建、删除组件；

ComponentFactoryResolver：组件解析器，可以将一个组件呈现在另一个组件的视图上。

搞明白了概念，看看代码吧：

HTML代码

ts代码

import {Component, Input, ViewContainerRef, ViewChild, ComponentFactoryResolver,ComponentRef,OnDestroy,OnInit} from &