angular4组件生命周期

zoukankan html css js c++ java

angular4组件生命周期
Angular4 组件生命周期
- 钩子可以在特定的组件生命周期发生时执行所需要的业务逻辑，红框中的方法只会被调用一次，其余会被多次调用。
- 用户在组件初始化后看到组件，变更检测阶段会确保组件的属性与页面同步，如果由于路由等操作，组件从dom树上移除，那angular会执行组件的销毁阶段（变更检测中执行的方法与初始化是一个方法）。
- 创建一个新组件，在生成的组件上已经实现了OnInit接口，每一个钩子都是@angular/core这个库里定义的接口，每个接口都有唯一的钩子方法，方法名是接口名加ng前缀构成。
- 当一个组件被创建时，它的钩子函数首先被调用然后执行其他方法，构造函数是一定存在的，其它可以根据需求添加。 ## 组件生命周期
- constructor：构造器函数，用于注入服务。
- ngOnChanges：当一个父组件修改或初始化一个子组件的输入属性时被调用。
- ngOnInit：组件初始化，通常会设置一些初始值。
- ngDoCheck：手动触发更新检查，在每个angular的变更检测周期中调用。
- ngAfterContentInit：内容初始化到组件之后。
- ngAfterContentChecked：内容变更检测之后。
- ngAfterViewInit：视图初始化之后。
- ngAfterViewChecked：视图发生变化检测之后，这个可以用来保证用户视图的及时更新。
- ngOnDestroy：组件注销时的清理工作，通常用于移除事件监听，退订可观察对象等。
变更检测和DoCheck钩子
- 在angular中，变更检测是由zone.js包来实现的，主要目的是保证组件的属性的变化和页面的变化是同步的，浏览器中发生的任何异步事件都会触发变更检测。
- 如何理解变更检测
  
  一个angular应用就是以主组件为根的组件树，当angular组件运行时，每一个组件都会生成属于它自己的变更检测器，当任何一个变更检测器检测到变化，zone.js就会根据组件的变更检测策略来检查组件，判断组件是否需要更新它的模板。
  
  angular实现了两个变更检测策略，default和OnPush,默认情况下都是default,如果所有的组件都是default策略，不管变更发生在那个组件上，zone.js都会检查整个组件树，用OnPush就不会让它检查这个组件及其子组件。
- 注：ngDocheck方法在页面点击、获取焦点、改变输入等都会被触发，所以调用此方法是要写清楚判断，否则会增加不要的调用。
view钩子
- ViewChild装饰器
  ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法，使用ViewChild装饰器可以在父组件中获得一个子组件的引用。
1.在控制器上用TypeScripe代码
- 在父组件的.ts文件中
```
@ViewChild("child1")    //引用子组件
child1:ChildComponent;      //调用子组件对象
```
- 在父组件的.html文件中
```
<app-child #child1></app-child>    //#child1为模块本地变量
```
- 子组件的.ts文件中
```
greeting() {
    console.log("Hello");
}
```
2.在父组件模板上调用子组件方法
- 在父组件的.ts文件中
```
@ViewChild("child2")    //引用子组件
child2:ChildComponent;      //调用子组件对象
```
- 在父组件的.html文件中
```
<app-child #child2></app-child>    //#child2为模块本地变量
<button (click)="child2.greeting()">点击调用</button>
```
- 子组件的.ts文件中
```
greeting() {
    console.log("Hello");
}
```
带有After的钩子

ngAfterViewInit和ngAfterViewChecked

     1. 这两个方法是视图被组装好后触发的。先调用ngAfterViewInit，而且只在初始化完毕调用一次。
     2. 当子组件的初始化和变更完毕后，父组件的才开始调用。
     3. 在父组件中定义一个变量，然后在ngAfterViewInit和ngAfterViewChecked这两个方法中改变变量的值，将抛出异常，这是因为angular自身规定，在变更检测周期中，禁止在一个视图已经被组装好后再去更新这个视图，而ngAfterViewInit和ngAfterViewChecked是在视图被组装好后触发的。解决方法：
     把赋值语句写到一个setTimeout()方法中，让它在另一个JavaScript运行周期中运行。
```
setTimeout(() => {   
      this.message = "Hello";
},0);
```
ngAfterContentInit和ngAfterContentChecked

与视图组装有关，针对父组件中投影进来的那部分内容。

投影
- 利用父组件做通用模板，然后各个子组件嵌套进去，实现自己的功能，例如做一个提示弹框，确认弹框等可以利用这个原理，在angular中有个投影的ng-content可以用在子组件中，父组件直接传递模板到子组件中。
- 写法
  第一步在子组件中需要被投影的那个组件中，用标记投影的位置。
```
<div style="border:3px solid red">
  <ng-content></ng-content>
</div>
```
第二步在父组件中调用子组件后，在子组件标签之间写一段html,这段html就会被投影过去。
```
<app-red-border>
    <p>我应该在红框中</p>
</app-red-border>
```
- 若想将两段html内容投影到不同的框框内，只要给它们设定不同的class，在中添加相应的select属性。
```
<div style="border:3px solid red">
  <ng-content select=".red"></ng-content>
</div>
<div style="border:3px solid green">
  <ng-content select=".green"></ng-content>
</div>
```
```
<app-red-border>
    <p class="red">我应该在红框中</p>
    <p class="green">我应该在绿框中</p>
</app-red-border>
```
总体理解
- 初始化过程
  在前面的截图中，前四个方法在属性初始化阶段，constructor是实例化对象，ngOnChanges初始化输入属性，onOnInit初始化除输入属性之外的其它属性，然后ngDocheck做一次变更检查，这时，组件的所有属性都已被赋值，然后组件开始渲染视图，首先渲染投影进来的内容，渲染好后调用ngAfterContentInit和ngAfterContentChecked,若有子组件，则子组件初始化，组件视图组装完毕后调用ngAfterViewInit和ngAfterViewChecked,组件初始化结束。
- 说明
  
  页面呈现后，与用户交互，用户点击、输入等会触发变更检测机制，一旦有变化，带有check的方法都会被调用，如果当前变化导致组件的输入属性也改变了，组件的ngOnchanges也会被调用。
  
  当从一个路由地址跳转到另一个路由地址时，前一个路由地址对应的组件将被销毁（ngOnDestroy）,后一个被创建。
相关学习链接
查看全文

相关阅读:
SQL_server 将表中的记录转换成 Insert(插入) SQL 语句
 Delphi DBGridEh导出Excel
hdu 2018 母牛的故事
 hdu 2084 数塔
 hdu 2190 重建希望小学
 hdu 2501 Tiling_easy version
hdu 2046 骨牌铺方格
 hdu 2045 不容易系列之(3)—— LELE的RPG难题
 高精度模板
 各种平面分割问题总结（转）

原文地址：https://www.cnblogs.com/boreguo/p/8393772.html

angular4组件生命周期

Angular4 组件生命周期

变更检测和DoCheck钩子

view钩子

带有After的钩子

投影

总体理解

相关学习链接