javascript - 遍历内部 DOM 元素并使用 Angular 2+ 替换内部 DOM

Question

我试图通过仅使用类名或 html 标签（因为我正在使用库）并尝试用一些标签替换来访问内部 DOM。尝试将 Element Ref 与渲染器一起使用，但无法访问内部 HTML。

someComponent.html

<div class="parent">  
    <a class="child">  
        <span>Some Text</span>  
    </a>  
</div>  

一些组件.ts

import { ElementRef, Renderer2, AfterViewChecked } from '@angular/core';  
export class someComponent implements AfterViewChecked{  
constructor(private elem:ElementRef, private renderer:Renderer2){}  

ngAfterViewChecked() {
    var newContent = `<span>p</span>`;  
    let elements = this.elem.nativeElement.querySelector('.parent a span');  
    this.renderer.setProperty(elements, 'innerHTML', newContent);  
}

错误消息：无法将属性“innerHTML”设置为空

标签： javascriptangulartypescriptangular5

Answer 1

您的代码在此Stackblitz中运行

您的代码似乎正在运行。另外，var应该避免，你应该用constand替换它let。由于您正在设置跨度 innerHTML，因此请勿重复<span>标记，除非您想在其中放置跨度。

import { ElementRef, Renderer2, AfterViewChecked } from '@angular/core'; 

export class someComponent implements AfterViewChecked {  
   constructor(private elem:ElementRef, private renderer:Renderer2) {}  

   ngAfterViewChecked() {
        const newContent = 'span content';  
        const element = this.elem.nativeElement.querySelector('.parent a span');  
        this.renderer.setProperty(element, 'innerHTML', newContent);  
   }
}