角度變化檢測，在視圖更新后根據 svg 對象幾何屬性更新視圖的正確方法

Question

我不確定在 Angular 中是否有正確的方法來做到這一點......

我想做的是與文本對象重疊管理有關，簡而言之：

1. 從后端獲取帶有日期和文本描述的對象列表。
2. 這些對象應顯示在 SVG 時間軸上，水平位置基於日期。
3. 視圖更新后，我想根據 width 屬性在每個文本對象上設置一個top屬性，以檢測兩個對象是否重疊。

我現在這樣做的方式：
在ngAfterViewChecked ，我正在檢查this.svgObj.nativeElement.children['textObjId'].textLength.baseVal.value 。 我使用這個寬度屬性來確定兩個文本對象是否重疊。

我的問題：
顯然，這是引發ExpressionChangedAfterItHasBeenCheckedError因為我正在檢查視圖后更改 top 屬性...

有沒有其他“角度方式”來實現我想要做的事情？

Answer 1

我發現了我的錯誤並在這里分享以防萬一。

我的問題：我在繪制后根據我的 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;
    }
}