Блог

У меня есть шаблон, подобный этому.

 <svg #connectorSVG [style.width.px]="diagramConnector.Width" [style.height.px]="diagramConnector.Height" >
  <g class="diagram-item-connector-line-path" >
    <path [attr.d]="diagramConnector.ConnectorPath" pointer-events="visibleStroke" fill="none" stroke-width="2"></path>
  </g>
</svg>
  

И вот как я вызываю getBox()

 @ViewChild('connectorSVG', { static: false }) connectorSVG: ElementRef;
resetPath(path: string) {
  this.diagramConnector.ConnectorPath = path;
  let rect = this.connectorSVG.nativeElement.getBBox();
  this.diagramConnector.Height = rect.height;
  this.diagramConnector.Width = rect.width;
}
  

Как вы можете видеть, я привязываю [attr.d] к свойству diagramConnector.ConnectorPath.

И вот в чем проблема.

Я вызываю #connectorSVG.getBox() сразу после значения diagramConnector.Изменен путь подключения для обновления ширины и высоты SVG. Но иногда я получаю правильную ширину и высоту, а иногда я получаю неправильную ширину и высоту от #connectorSVG.getBox().

Но когда я вызываю #connectorSVG.getBox() секундой позже, она всегда возвращает правильные ширину и высоту.

Я пробовал getBoundingClientRect(), но у него такое же поведение.

Это потому, что требуется некоторое время для привязки к свойству и обновления DOM? Если да, то как я узнаю, когда привязка завершена, и DOM обновляется после изменения значения свойства?

Или есть другие причины задержки? и как я могу всегда получать правильное значение?

К вашему сведению, я не могу использовать afterviewinit, потому что путь постоянно меняется после инициализации представления.