遍历内部 DOM 元素并使用角度 2+ 替换内部 DOM

Question

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

某组件.html

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

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

错误 msg：无法设置空的属性"innerHTML">

Answer 1

您的代码正在此堆栈闪电战中工作

您的代码似乎正在工作。另外，var应避免，则应将其替换为 const 和 let .由于您正在设置 span innerHTML，因此不要重复 <span> 标记，除非您想在其中放置一个 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);  
   }
}