Angular 组件通讯、生命周期钩子 小结

本文为原创，转载请注明出处： cnzt       文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/7986858.html

http://www.cnblogs.com/zt-blog/p/7986858.html

组件接受参数：

1. 路由查询参数（ActivatedRoute：参数镜像、参数订阅两种方式）

2. Input传参（单向）

钩子： ngOnChange

组件间通讯：

1. Input传参（单向） 父 --> 子

2. Output传参（单向） 子 --> 父

3. 中间人（父组件/服务作为他的子组件们的中间人） 兄弟 <--> 兄弟

一般是用服务来做中间人的，而不常用父组件！

4. 模板引用变量（也称模板本地变量）  -- 父组件调用自组建

　　父模板中调用子组件的属性、方法： #name

　　父组件中调用子组件的属性、方法： @ViewChild()

　　钩子： ngAfterViewInit   ngAfterViewChecked

5. 内容投影： 子组件中通过ng-content指令投影父组件的内容，父组件可以向投影的内容绑定自己的属性。

　　注： 被投影的片段不能使用子组件的属性，只能使用父组件的属性！

钩子： 下面是按执行顺序

Constructor

ngOnChanges  @Input

ngOnInit

ngDoCheck 变更检测

ngAfterContentInit    相关：子组件中通过ng-content指令投影父组件的内容。

ngAfterContentChecked

------ 子组件的上面六个钩子执行，直到没有自组件了 -----

ngAfterViewInit

ngAfterViewChecked

ngOnDestroy   跳转到新路由时，旧路由对应的组件被销毁。

其他：

ng-content 和 [innnerHTML] 都能绑定html内容，区别是：

1. ng-content是平台无关的，[innnerHTML] 只能用于浏览器平台

2. ng-content可以绑定多个内容片段，[innnerHTML] 只能绑定一个。

3. ng-content只能使用父组件的属性，[innnerHTML] 只能使用子组件的属性。