Question

在一个组件中，我在模板内部有一个svg渲染，并将对其进行操作以放置一些图形。实际上，我无法使用nativeElement或HTMLElement访问svg文档。

模板是：

     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>元素定位为目标。 br /> 请注意，由于CORS的限制，仅当您加载的内容与页面来自同一服务器时，此方法才有效。

这里是simple Stackblitz example演示解决方案。

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);
    });
  }
}

Answer 2

我发现，最好的方法是从构造函数访问它

waitingControlLoad : boolean = true;

constructor(
    private _elementRef: ElementRef,
) { }

然后，尝试按以下步骤从ngAfterContentChecked访问

ngAfterContentChecked() {
    // getElementsByClassName('form-control') is readOnly (not Live)
    // querySelector gets Live element but only first one!
    // querySelectorAll gets static Nodelist (readOnly)
    const list = this._elementRef.nativeElement.getElementsByTagName('input');
    if (this.waitingControlLoad && list.length > 0) {
        for (const item of list) {
            item.type = 'search';
        }
        // Prevent further invokations
        this.waitingControlLoad = false;
    }
}

在角度6中访问dom元素

2 个答案: