0

div文字列補間を使用してコンテンツを更新し、その要素のいくつかのプロパティにdivすぐにアクセスしたいと考えています。更新された要素にアクセスするにはどうすればよいですか?

以下のコード スニペットで、メソッド内のdiv要素の更新されたプロパティにアクセスするにはどうすればよいですか?someEventOccurred()

これが私のcomponent.jsファイルです(stackblitzアプリ

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

@Component({
  selector: 'my-app',
  template: `<div #message>{{ data }}</div>`
})
export class AppComponent  {
  data = 'default';
  @ViewChild('message', {static: false}) message;

  ngOnInit() {
    setTimeout(() => {
      this.someEventOccurred();
    }, 1000);
  }

  someEventOccurred() {
    this.data = 'hello world';

    // how to run something here only after #message is updated
    console.log(this.message.nativeElement.innerText);

    setTimeout(() => {
      // this runs after 1 second, meanwhile view has been updated
      console.log(this.message.nativeElement.innerText);
    }, 1000);
  }
}

の更新された要素にアクセスできることはngAfterViewChecked()わかっていますが、どの要素が変更されたかをどのように知ることができますか? また、このフックを使用する以外の解決策があるかどうかも知りたいです。

注: 上記のコード スニペットは単なる例です。私の実際のプロジェクトではsomeEventOccurred()、リモート サーバーから http 応答を受け取ったときに呼び出します。innerText も単なる例です。要素のさまざまなプロパティを使用します。

4

1 に答える 1