LoginSignup
11

More than 5 years have passed since last update.

Angular2で描画後になにか操作したい場合

Last updated at Posted at 2017-04-02

Angular2で描画後にDOM操作をしたい場合

例えばAngular2で描画した後にDOMに対してフォーカスを当てたい場合などがあります。

ngAfterViewInit と ngAfterViewChecked を使用する

その際行った際に使用するのが ngAfterViewInit と ngAfterViewChecked です。

HOOK 説明 参考
ngAfterViewInit コンポーネントのビューが生成された直後に呼ばれます。 ngAfterViewInit
ngAfterViewChecked コンポーネントのビューの変更を確認した後に呼ばれます。 ngAfterViewChecked

使用方法

app.component.ts
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");
  }
}

使用上の注意

Expression has changed after it was checked. Previous value: 'Angular'. Current value: 'Angular2'.

下記のようなコードを書くと上記のようなエラーが発生します。

app.component.ts
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 を使用して
直接 template の情報が描き変わるようなことはしてはいけないということです。

描画後に変更を行いたい場合は下記のようにsetTimeoutを使用するなどして
回避する必要があります。

app.component.ts
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 はコンポーネントがチェックされるたびに呼ばれるので動作がかなり遅くなったり、場合によっては無限に実行され続ける場合がありますので
必要な場合のみ処理を行うようコードを書くべきなのでしょう。

なにか、間違いやお気づきの点がありましたらコメントくだされば幸いです。

参考記事

Angular2のLifecycle Hooksを理解する
How to run a jquery function in Angular 2 after every component finish loading

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11