Доступ к элементу дом в угловой 6

Question

В компоненте у меня есть рендеринг SVG внутри шаблона, и я бы манипулировал им, чтобы добавить графику. На самом деле я не могу получить доступ к документу SVG с помощью nativeElement или HTMLElement.

шаблон:

     template:

     `<div>
           <object data="/assets/deploiement.svg" type="image/svg+xml" height="450" width="650" #dataSvg >
              </object>
</div>`,

пример, который я хочу реализовать:

    ngAfterViewInit() {

  const elemnentRef = this.dataSvg;
  console.log(elemnentRef.);
   const circle = '<circle cx="500" cy="50" r="65" />';

 ( this.state === 2 ) {
      this.dataSvg.nativeElement.svg.append(circle) ;
    } 

  }

Answer 1

Проблема, с которой вы сталкиваетесь, связана с тем, что вы используете элемент object , который предназначен для управления внешними ресурсами и создает «подокно» (как это делает iframe ).
Поэтому, если вы действительно хотите сохранить этот подход, единственный способ манипулировать контентом, загруженным через <option>, - это дождаться загрузки контента и указать целевой элемент <svg> внутри подокна.
Обратите внимание, что из-за ограничений CORS это будет работать, только если загружаемый контент поступает с того же сервера, что и ваша страница.

Вот простой простой пример Stackblitz , демонстрирующий решение.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <object data="/assets/debug.svg" type="image/svg+xml" height="450" width="650" #dataSvg></object>
    </div>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('dataSvg') dataSvg: ElementRef;

  ngAfterViewInit() {
    const elemnentRef = this.dataSvg;
    // when content is loaded...
    elemnentRef.nativeElement.contentWindow.addEventListener('load', function (event) {
      // ...retrieve svg element
      const document = elemnentRef.nativeElement.contentWindow.document;
      const svg = document.querySelector('svg');
      // create a circle
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttributeNS(null, 'cx', 50);
      circle.setAttributeNS(null, 'cy', 50);
      circle.setAttributeNS(null, 'r', 40);
      circle.setAttributeNS(null, 'fill', 'red');
      // append it to existing content
      svg.append(circle);
    });
  }
}