时间戳

首页 > 解决方案 > 角度变化检测，在视图更新后根据 svg 对象几何属性更新视图的正确方法

angular - 角度变化检测，在视图更新后根据 svg 对象几何属性更新视图的正确方法

问题描述

我不确定在 Angular 中是否有正确的方法来做到这一点......

我想做的是与文本对象重叠管理有关，简而言之：

  1. 从后端获取带有日期和文本描述的对象列表。
  2. 这些对象应显示在 SVG 时间线上，水平位置基于日期。
  3. 更新视图后，我想top根据 width 属性在每个文本对象上设置一个属性，以检测两个对象是否重叠。

我现在这样做的方式：
在 中ngAfterViewChecked，我正在检查this.svgObj.nativeElement.children['textObjId'].textLength.baseVal.value. 我正在使用这个宽度属性来确定两个文本对象是否重叠。

我的问题：
显然这会引发 aExpressionChangedAfterItHasBeenCheckedError因为我在检查视图后更改顶部属性...

有没有其他“角度方式”来实现我想要做的事情？

标签： angularsvg

解决方案

我发现了我的错误并在这里分享以防万一。

我的问题：我根据绘制后的 SVG 元素的尺寸在对象上设置属性。然后将该计算属性绑定到我的模板中我的 SVG 元素的一些定位属性。那是引发 ExpressionChangedAfterItHasBeenCheckedError。

解决方案：通过从那里访问元素，直接从 ngAfterViewChecked 方法设置 SVG 位置属性。类似的东西：

export class SampleComponent implements AfterViewChecked {    
    @ViewChild('sampleSVG') sampleSVG: ElementRef;    
    ngAfterViewChecked(): void {
        this.sampleSVG.nativeElement.children['element-id-123'].y.baseVal.value = 12345;
    }
}

推荐阅读