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

我想使用字符串插值更新

div

的内容，然后立即访问该

div

元素的一些属性。如何访问更新的元素

在下面的代码片段中，如何访问

someeventoccurrent（）

方法中

div

元素的更新属性

这是我的组件.js文件（）

从'@angular/core'导入{Component，OnInit，ViewChild}；
@组成部分({
选择器：“我的应用程序”，
模板：`{data}}`
})
导出类AppComponent{
数据='默认'；
@ViewChild（'message'，{static:false}）消息；
恩戈尼尼特（）{
设置超时（（）=>{
this.someEventOccessed（）；
}, 1000);
}
someeventcoursed（）{
this.data='hello world'；
//如何仅在#消息更新后在此处运行某些内容
log（this.message.nativeElement.innerText）；
设置超时（（）=>{
//这将在1秒后运行，同时视图已更新
log（this.message.nativeElement.innerText）；
}, 1000);
}
}

我知道我可以访问

ngAfterViewChecked（）

中更新的元素，但我如何知道哪个元素已更改？ 我还想知道，除了使用这个钩子，是否还有其他解决方案

---

注意：上面的代码片段只是一个示例，在我的实际项目中，当我从远程服务器获得http响应时，我将调用

someEventOccursed（）

。innerText也是一个例子，我将使用元素的不同属性。

为了立即访问更新的属性，而不是使用

setTimeout

，您可以手动触发更改检测

构造函数（私有cdr:ChangeDetectorRef）{
发生了一些事件（）{
this.data='hello world'；
this.cdr.detectChanges（）；
console.log（this.message.nativeElement.innerText）；//hello world
}

您可能还会发现关于更改检测的信息非常有用

---

另一种不应该涉及

ChangeDetectorRef

API的方法是使用组件并将数据作为@Input params传递。这样，您可以为该组件选择

OnPush

检测策略，并在内部完成计算后（通过

@Output

属性）发出事件。您可以在lifecycle钩子中检测

@Input

属性的更改。

根据代码中的注释，听起来您想订阅元素属性。是吗？@robbieAreBest是的，我想订阅

scrollHeight

属性，这样我可以将其设置为

scrollTop

，以便在向元素添加新内容时滚动到底谢谢。然而，一个问题是，什么时候使用组件的第二种方法会比使用

ChangeDetectorRef

更好？或者这只是我们的偏好？依我看，如果你可以避免使用

cdr

，而不需要付出太多的努力，那么就把

cdr

扔掉。在本例中，我将使用第二种方法，因为这将允许封装逻辑。例如，此类组件的父级可能只对子级的几个属性感兴趣，并且计算逻辑可以在子级中进行，而无需向父级添加无关的代码。

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);
  }
}