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）,后一个被创建 。

相关学习链接

    1. angular4基础之组件生命周期（含代码） http://blog.csdn.net/fan2252228703/article/details/78116121
    2. angular4路由 http://git.int-yt.com/liqiaona/angular4
    3. angular开发者网站 http://www.ngfans.net/
    4. angular学习资源 http://www.ngfans.net/topic/5/%E9%95%87%E6%A5%BC-angular%E4%BC%98%E8%B4%A8%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%94%B6%E9%9B%86
    5. RxJS中文网站 http://cn.rx.js.org/
    6. angular4修仙之路 https://segmentfault.com/a/1190000008754631

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

时间： 2024-08-01 11:15:36

angular4组件生命周期的相关文章

angular2系列教程（五）Structural directives、再谈组件生命周期

今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, ngSwitch and ngFor. 例子 例子是我自己改写的,编写一个structural directives,然后通过这个指令实例化和注销组件,在此同时监视组件生命周期. 源代码 UnlessDirective 这个指令是官网示例中的指令. src/unless.directive.ts im

React组件生命周期

组件的生命周期 组件有两个值State状态和PorpType属性,当状态发生变化属性就会发生变化.状态确定属性确定. 状态发生变化时会触发不同的钩子函数,从而让开发者有机会做出响应.状态可以理解为事件. 组件生命周期内 初始化-运行- 销毁 初始化阶段可以使用的钩子函数:getDefaultPorps 获取实例的默认属性/getInitialState获取实例的初始化状态/componentWillMount组件即将被渲染/ render渲染/componentDidMount组件装载之后 运行

React Native组件生命周期

概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点.就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle). React Native组件的生命周期大致上可以划分为实例化阶段.存在阶段和销毁阶段.我们只有在理解组件生命周期的基础上,才能开发出高性能的app. React Native中组件的生命周期大致可以用以下图表示: 如图: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,

Android组件生命周期（二）

引言 应用程序组件有一个生命周期——一开始Android实例化他们响应意图,直到结束实例被销毁.在这期间,他们有时候处于激活状态,有时候处于非激活状态:对于活动,对用户有时候可见,有时候不可见.组件生命周期将讨论活动.服务.广播接收者的生命周期——包括在生命周期中他们可能的状态.通知状态改变的方法.及这些状态的组件寄宿的进程被终结和实例被销毁的可能性. 上篇Android组件生命周期(一)讲解了论活动的生命周期及他们可能的状态.通知状态改变的方法.本篇将介绍服务和广播接收者的生命周期: 服务生命

Android组件生命周期（一）

引言 应用程序组件有一个生命周期——一开始Android实例化他们响应意图,直到结束实例被销毁.在这期间,他们有时候处于激活状态,有时候处于非激活状态:对于活动,对用户有时候可见,有时候不可见.组件生命周期将讨论活动.服务.广播接收者的生命周期——包括在生命周期中他们可能的状态.通知状态改变的方法.及这些状态的组件寄宿的进程被终结和实例被销毁的可能性. 本文主要讨论活动的生命周期及他们可能的状态.通知状态改变的方法.分为以下三部分: 1.活动生命周期 2.保存活动状态 3.协调活动 1.活动生命

React组件生命周期小结

转载自:http://www.jianshu.com/p/4784216b8194 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函数来控制组件在生命周期的各个阶段的动作. 在ES6中,一个React组件是用一个class来表示的(具体可以参考官方文档),如下: // 定义一个TodoList的React组件,通过继承React.Component来实现 class Tod

React—组件生命周期详解

React-组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢迎加入QQ群(115402375)讨论!博客编写已经转移到http://blog.csdn.net/limm33 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出. React为每个组件

Angular2 组件生命周期

1. 说明 Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力. 2. 接口 按照生命周期执行的先后顺序,Angular生命周期接口如下所示 名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOnChanges 完成之后调用. ( 译注:也就是

Android应用常规开发技巧——善用组件生命周期

数据管理 对于只读数据,一种常用的管理模式是在onCreate函数中进行数据的加载,直到组件的onDestory函数被调用时在进行释放. // 缓存只读的数据 private Object readOnlyData; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 读取数据到内存 readOnlyData = readOnlyData();