时间戳

首页 > 解决方案 > 如何在使用单向绑定更改元素后访问更新的元素

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

问题描述

我想更新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 也只是一个示例，我将使用元素的不同属性。

标签： angularangular2-databinding

解决方案

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

constructor (private cdr: ChangeDetectorRef) { }

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

   this.cdr.detectChanges();

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

您可能还会发现这篇关于变更检测的文章很有用。

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

推荐阅读