如何在使用单向绑定更改元素后访问更新的元素

Question

我想使用字符串插值更新 div 的内容，然后立即访问该 div 元素的某些属性。我如何访问更新的元素？

在下面的代码片段中，如何在 someEventOccurred() 方法中访问 div 元素的更新属性？

这是我的 component.js 文件 (stackblitz app)

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() 中更新的元素，但我怎么知道哪个元素发生了变化？我也想知道除了使用这个hook还有没有其他的解决办法

注意：上面的代码片段只是一个示例，在我的实际项目中，当我从远程服务器收到 http 响应时，我将调用 someEventOccurred()。 innerText 也只是一个示例，我将使用元素的不同属性。

Answer 1

为了立即访问更新的属性，您可以手动触发更改检测，而不是使用setTimeout。

constructor (private cdr: ChangeDetectorRef) { }

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

   this.cdr.detectChanges();

   console.log(this.message.nativeElement.innerText); // hello world
}

您可能还会发现 this article 关于 变化检测 有用。

另一种不应涉及 ChangeDetectorRef API 的方法是使用组件并将数据作为 @Input 参数 传递。这样，您可以为该组件选择 OnPush 检测策略，并在内部完成计算后发出事件（通过 @Output 属性）。您可以在 OnChanges 生命周期挂钩中检测 @Input 属性的变化。

如何在使用单向绑定更改元素后访问更新的元素

How to access updated element after changing it using one way binding

angular2-databinding

angular