依赖注入和动态组件的WWH（What Why How）

动态组件

问题1：动态组件和咱们写的ngIf选择器有啥区别而且优点在哪里？

模板选择器直接实例化组件：

解释：根据已建立的组件工厂进行组件实例化，无须动态生成宿主元素（标签）

 

动态组件（工厂模式实例化组件）

解释：根据已经声明的组件（静态类d.ts）建立组件工厂再进行组件实例化，宿主元素（标签）经过Host文件生成

 

答：

先说场景：

（1）NG官网的例子一个广告位须要多个不一样布局的页面进行切换，若是用ngIf,你就只能写死多个模板在父组件里（静态）。

（2）tab页切换，能够用上图动态组件生成的例子；（scm系统和wms系统的tab页看上去是路由锚点控制页面切换，但实际也是披着动态组件的羊毛）

二者对比：

（1）展示方面：没任何差异

（2）工做量：二者其实没什么差异，但同在一个父组件下基本都是传相同的参数值，那么你宁愿一个个写在模板上，仍是写在方法里一劳永逸？

（3）性能：ngIf——我第一时间就想到了ngIf带来的注释模板，页面的变化都要进行变化检测，模板有多个ngIf模板就会屡次判断（强行解释）；其次这种懒加载方式能减小bundle的体积，加快首屏渲染速度
    子问题1：enterComponents和声明组件区别？ 答：declarations——经过模板的selector建立组件，即声明并建立；entryComponents——声明不建立，等到用的时候才经过离线模板编译器（OTC）根据entryComponents List的内容编译已声明的组件建立工厂，Angular使用entryComponents来启用“tree shaking”，即只编译项目中实际使用的组件，而不是编译全部在ngModule中声明但从未使用的组件，enterComponents在ng里有三种表现形式，

• 在@NgModule.bootstrap里声明的启动组件，如AppComponent。
• 在路由配置里引用的组件
• 其余经过编程使用组件类型加载的动态组件 （angular2(4) 中动态建立模块和组件的两种方案）

 

扩展：

一句话分析这张图片：ng的组件都是经过工厂函数（ComponentFactory<comp>）实例化出来，ngFactory.js文件负责装载组件模板及变化检测代码片断等静态数据，变量早已经在编译过程前开辟好内存空间，一切渲染过程都是以此为媒介。剩下的就是coder的选择是否用动态组件的方式加载，若是选用动态组件方式一定通过entryComponents的记录，当页面要加载这个组件时会OTC编译声明好的组件同时建立ngFactory.js 和 _Host_[x].ngFactory.js，前者渲染页面（考虑IOS和Android）后者负责生成宿主元素，这个就是一个动态组件编译过程。

 

其余：动态组件考点不止这些，还有装饰器@XXX、元数据的传入能够参考 Implementing custom component decorator ，

typescript的decorator是如何被编译的

 

问题2：ng的依赖注入在软件开发解决什么？

答：依赖注入(Dependence Inject)是控制反转(Inversion of Control 后)的行为。

控制反转——好莱坞的法则：“don‘t call us, we‘ll call you”。

紧耦合，谁也不能缺乏谁，对象或者模块间经过互new的形式存在

实际场景，复杂且很差管理。

引入第三方把相应的对象/类（ng以服务形式存在）统一管理，并按需注入

最后，达到解耦的理想状态

 

问题3：依赖注入不单单是调用服务，实战还有更多新玩法。

概念篇——一、建立服务过程选择@Injectable、@NgModule 仍是 @Component ？

二、provider入口API及各类提供商（useClass比较常见，适用于内部固定，外部变化多。useFactory对于权限控制即时变动状态场景有用）

三、每一个组件建立一个注入器实例，服务实例在应用中是注册屡次仍是仅有一次，是根据注入形式不一样前者是@Component.provider后者是AppModule.provider （举例：多种编辑会话，每一个组件须要一个特定的服务进行管理表单的新值和旧值，这种状况必须使用@Component.provider，你能够理解为AppModule.provider注册的就只有一个对象（单例），根模块的提供商是向下传递到有须要用到该服务的组件中，而@Component.provider是为每一个组件实例化独立的服务）

实践篇——一、组件能够经过注入器，把本身注入到子组件上（服务=类）

二、类-接口写法{provider: virtual, useClass: realClass}，为了节省内存，同时做为Token而存在

三、出现引用循环，当即想到[{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }]

四、仅找上一级的注入器服务添加@Host() 在服务建立前写 @Host() private heroCache: HeroCacheService，防止服务没找到用@Optional()

 

疑问：angular既然选择了AOT编译，那么离线模板编译器（OTC）在客户端是以什么形式存在？代码片断？

 

动态组件模块相关文章

angular2(4) 中动态建立模块和组件的两种方案

[译] 关于 Angular 动态组件你须要知道的

Angular进阶：Angular编译机制（AOT、JIT）

Implementing custom component decorator 

30行代码让你理解angular依赖注入：angular 依赖注入原理

ioc-demo简单例子