Angular 9 系列（一）动态加载组件

小渣渣

Angular 9 系列（一）动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列（二）动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列（三）订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列（五）格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

组件的模板不会永远是固定的。应用可能会需要在运行期间加载一些新的组件。

使用场景：

1.页面加载根据不同的参数加载不同的组件，显示不同的效果
2.页面有多个元素组成，一开始不需要全部显示，用户点击之后才会显示具体的信息，例如：tab 选项卡、动态弹出模态框等。

本文的使用场景是2，试想一下，如果不使用动态加载的情况下，当打开主界面，所有页面的隐藏的组件都会被加载，所有组件调用自己对应的接口服务，往往，我们不需要看到所有的信息，这样就极大的浪费了资源，而且还有可能造成主界面加载缓慢，影响用户体验。

ng中动态加载组件的两种方式：

加载已经声明的组件： 使用ComponentFactoryResolver，将一个组件实例呈现到另一个组件视图上；
动态创建组件并加载：使用ComponentFactory和Compiler，创建和呈现组件
根据我们的需求，各个组件是事先开发好的，需要在同一个组件上显示出来。所以第一种方式符合我们的要求。

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

• ViewChild：属性装饰器，通过它可以获得视图上对应的元素；
• ViewContainerRef：视图容器，可在其上创建、删除组件；
• ComponentFactoryResolver：组件解析器，可以将一个组件呈现在另一个组件的视图上。
  

首先，我们看下效果图，点击modal1按钮动态加载modal1组件，点击modal2按钮动态加载modal2组件。



首先，我们创建一个angular项目。

创建4个组件，分别是index、modal1、modal2、modal3，其中，modal1和modal2是我们动态加载的组件。

index component

html：

登录可见。

ts：

登录可见。

modal1 component

html：

登录可见。

ts：

登录可见。

modal2 component

html：

登录可见。

ts：

登录可见。

modal3 component

html：

登录可见。

ts：

登录可见。

我们对3个modal，都在构造函数进行了打印自己的名称。

modal1和modal2，都是动态加载的，只有点击按钮去加载的时候，才会触发执行构造函数，modal3没有使用动态加载，父界面加载完成后，modal3界面的构造函数会立马执行。

这样就可以看到动态加载的优势了，用不到就不会加载，类似c#中的懒加载。

源码下载：

游客，如果您要查看本帖隐藏内容请回复

参考资料： https://angular.io/guide/dynamic-component-loader

小渣渣

Angular 9 系列（一）动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列（二）动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列（三）订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列（五）格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 系列（六）调用原生JS变量和方法
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 系列（七）css样式作用域
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 系列（八）更新子组件的值通过set触发事件
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 系列（九）#id 选择器在页面应用
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 系列（十）嵌入vconsole、eruda开发者调试面板
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 系列（十一）定义样式的5种方法
https://www.itsvse.com/thread-9305-1-1.html


Angular 9 系列（十二）基于OTP生成动态令牌
https://www.itsvse.com/thread-9325-1-1.html

小渣渣

Angular 10 系列（十三）引入百度 echarts 图表
https://www.itsvse.com/thread-9347-1-1.html

Angular 11 系列（十四）生产环境进行 Debug 调试
https://www.itsvse.com/thread-9348-1-1.html

Angular 11 系列（十五）获取组件高度和动态调整高度
https://www.itsvse.com/thread-9364-1-1.html

Angular 11 系列（十六）页面解析 HTML 源码
https://www.itsvse.com/thread-9376-1-1.html

Song300

学习！！！！！！！！！！！！！！