使用场景
我们先明确下动态组件的使用场景，在代码运行时要动态加载组件，换成普通人话，代码需要根据具体情况（比如用户的操作，向后台请求结果）确定在某些地方加载某些组件，这些组件不是静态的（不是固定的）。
官网的举例就是，构建动态广告条，广告组件不断会推出新的，再用只支持静态组件结构的模板显然是不现实的。
再举一个常见的例子，动态弹出框，弹出的组件是不确定的、不断更新的，这里那里弹出个购买框，那那那又需要弹出样式选择框，静态组件结构模板是不能满足群众日渐增长的需求。
怎么实现
然后我们来找个把手，看实现动态组件需要什么。
一、动态组件放在哪
我们需要知道把动态组件加在哪里，也就是锚点。那什么东西可以用来加载组件呢？
你可能会想说，组件不就加载锚点上吗，锚点不就是dom节点吗？那当然是加载dom节点里啊。
我们先来回顾下angular操作dom的常见方法，原生js操作dom的方法你就不要想了，你觉得它能返回给你能加载angular组件的对象吗？
angular 提供了一种叫做 dom query 的技术，主要来源于 @viewchild 和 @viewchildren 装饰器（decorators），两者基本功能相同 。
@viewchild： 返回单个引用，在视图的 dom 中查找能匹配上该选择器的第一个元素或指令。
@viewchildren ：返回由 querylist 对象包装好的多个引用，在视图的 dom 中查找能匹配上该选择器的所有元素或指令。
基本语法：
@viewchild([reference from template], {read: [reference type]});
dom query 的技术查找出来的对象分为三类：
elementref：如果它挂载的是类似 span 的简单 html 元素；
templateref: 如果它挂载的是 template 元素；
viewcontainerref: 无法推断，一般要程序员要在read中指明，任何dom元素都可以被用作为视图容器。
我们通过官网查询api可以看到只有viewcontainerref才是可以将一个或多个视图附着到组件中的容器，也就是只有它才可以加载组件。不过要注意的是，它是一个可以将新的组件作为其兄弟（节点）的dom元素（容器），是兄弟，不是父子额。
好的，我们确定了使用viewcontainerref来加载容器，获取viewcontainerref有两种方式：
第一种就是上面的通过dom query查询@viewchild获取
<ng-container #addcomp></ng-container>
@viewchild('addcomp', {read: viewcontainerref}) adcomp:viewcontainerref;
第二种就是官网里的例子，用依赖注入
import { directive, viewcontainerref } from '@angular/core';
@directive({
selector: '[ad-host]',
})
export class addirective {
constructor(public viewcontainerref: viewcontainerref) { }
}
锚点设置ng-template上，通过指令注入获取viewcontainerref
template: ` <div class="ad-banner-example"> <h3>advertisements</h3> <ng-template ad-host></ng-template> </div>
二、怎么获取组件的实例
组件加载到视图中去，不是简单一个new就实例化，再append、insert之类就能附加上去的就可以的。动态组件需要编译器事先编译存放好起来，再以componentfactory封装起来，之后的component实例要通过componentfactory 来创建。大家可以看下这篇文章[译] 关于 angular 动态组件你需要知道的，不过它提及的使用 systemjsngmoduleloader 模块加载器已经被淘汰了。
componentfactoryresolver一个简单的注册表，映射components到componentfactory可用于创建组件实例的生成的类。它可用于获取给定组件类型的工厂，然后使用工厂的create()方法创建该类型的组件。
我们来看下官网实例代码，以下不是完整代码
//注入componentfactoryresolver
constructor(private componentfactoryresolver: componentfactoryresolver) { }
loadcomponent() {
......
// 拿到可用于创建广告组件实例的生成的componentfactory
const componentfactory = this.componentfactoryresolver.resolvecomponentfactory(aditem.component);
//获取加载组件的容器
const viewcontainerref = this.adhost.viewcontainerref;
viewcontainerref.clear();
// 把组件放到容器里，再传一些参数给它
const componentref = viewcontainerref.createcomponent(componentfactory);
(<adcomponent>componentref.instance).data = aditem.data;
}
你以为这就完了，你以为这样写出的代码就能运行吗？太年轻，让前浪来给你说一下要注意的几个点：
angular 中的组件、指令、管道都是是被封装在模块中，以组件为例，如果要使用其别的模块组件，必须别的模块有export这个组件，而且你在自己模块也要import其他模块。所以官网例子的指令记得导入导出。
如果是动态组件，必须把组件注册在模块中 entrycomponents 属性，但是就不用了export，import模块还是需要的。
以上就是详解angular动态组件的详细内容，更多关于angular动态组件的资料请关注www.887551.com其它相关文章！
