gpt4 book ai didi

javascript - Angular 2+ : change detection, 属性更改和 View 更新之间的状态

转载 作者:太空狗 更新时间:2023-10-29 19:27:06 24 4
gpt4 key购买 nike

------------更新----------------

ChangeDetectorRef.detectChanges() 运行组件及其子组件的变化检测器。因此,它可能是一种解决方案。

------------原始问题----------------

  1. 目的:我想在组件中的特定 dom 元素更新后得到通知。

    见下图:(改变text属性会改变p的内容,进而改变dom中p元素的高度) enter image description here

  2. 结果:p 的 clientHeight 仍然是之前的值,不是最新的。

    预期结果:最新值

  3. 可能的解决方案:

    • 我知道 ngAfterViewChecked 每次在变化检测中都会被触发,它代 TableView 更新后的状态。
    • 针对此问题的一些解决方案可以强制进行更改检测,例如:ApplicationRef.tick()ChangeDetectorRef.detectChanges()(参见此处的答案:https://stackoverflow.com/a/34829089/7787645 )

<强>4。我的困惑:

  • 我想要的是组件中特定 DOM 元素更新后的状态。
  • ngAfterViewChecked 将被每个异步函数触发(默认情况下),我认为这不适合这里。
  • ApplicationRef.tick()ChangeDetectorRef.detectChanges() 可以强制触发变化检测,这将解析整个组件树(从根到子)我认为这可能太昂贵了。
  • 我想知道是否有这样的功能:

changeProperty(this.text => {
this.text = 'A long long text';
}).then( () => {
// here is the state after the corresponding text is updated in the view
})

或者解决这个问题的正确方法是什么?感谢您的任何想法!

最佳答案

没有那样的东西,我怀疑它永远不会出现。

但是您的特定问题可以用完全不同的方式解决。只要您想控制文本/html 的呈现方式,您自己呈现就容易多了。

只需设置 innerHTML,适当的高度就会到位

changeText(para) {
para.innerHTML = 'long text';
console.log(para.clientHeight);
}

就是这样。请记住,在这样分配之前使用 innerText 或执行一些 HTML 清理可能会更好。

关于javascript - Angular 2+ : change detection, 属性更改和 View 更新之间的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48136911/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com