以角度 6 访问 dom 元素答案

【问题标题】：Access dom element in angular 6以角度 6 访问 dom 元素
【发布时间】：2019-04-08 17:03:24
【问题描述】：

在一个组件中，我在模板中有一个 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) ;
    } 

  }

【问题讨论】：

你为什么要使用object标签而不是svg标签？
我使用对象根据对象的状态加载外部 svg
您可以使用 svg 标签来做到这一点。还有其他原因吗？

标签： angular dom svg

【解决方案1】：

您遇到的问题与您使用object 元素有关，该元素用于管理外部资源并创建“子窗口”（如iframe 所做的那样）。
因此，如果您真的想保留这种方法，您必须操作通过<option> 加载的内容的唯一方法是等待内容加载并定位子窗口内的<svg> 元素。
请注意，由于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);
    });
  }
}

【讨论】：

谢谢，但我有一个未定义的 nativeElement 错误
你的意思是example 不适合你？你用的是什么浏览器？
它可以工作，只在 nativeElement 上监听：sasensi-svg-element-creation-ejdmfy.stackblitz.io
另一个问题，是 Angular 管理部分 SVG 的图形事件（点击）吗？
我认为你应该把这个问题作为一个单独的问题来问。

【解决方案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;
    }
}

【讨论】：