angular4 Directive Lifecycle

Posted on

angular 指令(Directive)组件(Component)的关系:

- Component 继承(extends) Directive
- (组价) Component 是 (指令)Directive 的组成部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export interface Directive {
   selector?: string;  // 用于定义组件在HTML代码中匹配的标签
   inputs?: string[];  // 指令的输入属性
   outputs?: string[];  // 指令的输出属性
   host?: {[key: string]: string};  // 绑定宿主的属性、事件等
   providers?: Provider[];  // 设置指令及其子指令可以用的服务
   exportAs?: string;  // 导出指令，使得可以在模板中调用
   queries?: {[key: string]: any};  // 设置指令的查询条件
}

export interface Component extends Directive {
   changeDetection?: ChangeDetectionStrategy;  // 指定组件使用的变化检测策略
   viewProviders?: Provider[];     // 设置组件及其子组件(不含ContentChildren)可以用的服务
   moduleId?: string;  // 包含该组件模块的 id，它被用于解析 模版和样式的相对路径
   templateUrl?: string;  // 为组件指定一个外部模板的URL地址
   template?: string;  // 为组件指定一个内联的模板
   styleUrls?: string[];  // 为组件指定一系列用于该组件的样式表文件
   styles?: string[];  // 为组件指定内联样式
   animations?: any[];  // 设置组件相关动画
   encapsulation?: ViewEncapsulation;  // 设置组件视图包装选项
   interpolation?: [string, string];  // 设置默认的插值运算符，默认是"{{"和"}}"
   entryComponents?: Array<Type<any>|any[]>;  // 设置需要被提前编译的组件
}

  • 指令与组件共有的钩子

    • ngOnChanges // 当数据绑定输入属性的值发生变化时调用 (1)
    • ngOnInit // 在第一次 ngChanges 后调用 (2)
    • ngDoCheck // 自定义的方法，用于检测和处理值的改变 (3)
    • ngOnDestory // 指令销毁前调用 (8)

  • 组件特有的钩子

    • ngAfterContentInit // 在组件内容初始化之后调用 (4)
    • ngAfterContentChecked // 组价每次检查内容时调用 (5)
    • ngAfterViewInit // 组件相应的视图初始化之后调用 (6)
    • ngAfterViewChecked // 组件每次检查视图时调用 (7)

constructor 构造函数

组件的生命周期函数会在所有生命周期钩子调用之前调用， 一般初始化数据，或者依赖注入用.

ngOnChanges

当数据绑定输入属性的值发生改变时，Angular会主动调用ngOnChanges方法, 他会获得一个SimpleChanges对象，
包含绑定的旧值新值，用于检测组件的输入属性的变化.

ngOnInit(只会被调用一次)

在ngOnChanges执行之后，会调用ngOnInit， 执行组件的其他操作或获取组件输入属性的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
  `,
})
export class AppComponent implements OnInit {

  name: string = '';

  constructor() {
    console.log('Constructor initialization');
    this.name = 'Semlinker';
  }

  ngOnInit() {
    console.log('ngOnInit hook has been called');
  }
}

// 输出的结果为:
    Constructor initialization
    ngOnInit hook has been called

ngOnDestory

在指令被销毁前调用，用于清理操作,比如: 清理定时器,移除事件监听、退订Observable等

ngDoCheck

在组件的输入属性发生变化时触发，自定义我们的检测逻辑。它也可以用来加速我们变化检测的速度

ngAfterContenInit

在组件使用 ng-content 指令的情况下，Angular 会在将外部内容放到视图后用
它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素

ngAfterContentChecked

在组件使用 ng-content 指令的情况下，Angular 会在检测到外部内容的绑定或者每次变化的时候调用

ngAfterViewInit

在组件相应的视图初始化之后调用，它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素

ngAfterViewChecked

组件每次检查视图时调用
0%