如果想在Angular2绘制完成后进行DOM操作

例如，当使用Angular2进行绘图后，可能需要将焦点设置在DOM上。

使用 ngAfterViewInit 和 ngAfterViewChecked

在执行时使用的是 ngAfterViewInit 和 ngAfterViewChecked。

使用方式

import { Component, AfterViewInit, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent implements AfterViewInit, AfterViewChecked { 
  name = 'Angular';
  ngAfterViewInit(){
    console.log("init");
  }
  ngAfterViewChecked(){
    console.log("checked");
  }
}

使用时的注意事项

在进行检查之后，表达方式发生了变化。之前的值是’Angular’，现在的值是’Angular2’。

如果编写以下代码，则会出现上述错误。

import { Component, AfterViewInit, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent implements AfterViewInit { 
  name = 'Angular';
  ngAfterViewInit(){
    this.name = "Angular2";
  }
}

使用 ngAfterViewInit 或 ngAfterViewChecked 来直接更改模板信息是不可行的原因很简单。

如果想在绘制完成后进行更改，需要使用如下的setTimeout等方法来避免。

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent implements AfterViewInit { 
  name = 'Angular';
  ngAfterViewInit(){
    setTimeout(() => this.name = "Angular2");
  }
}

另外，由于 ngAfterViewChecked 在每次组件检查时都会被调用，因此它的执行速度可能会变得很慢，并且在某些情况下可能会无限执行下去。因此，我们应该只在必要时编写代码来进行处理。

如果有任何错误或者需要注意的地方，请您给予评论，将不胜感激。

参考文章

如何在Angular 2中完成每个组件加载后运行一个jquery函数