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

Question

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

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

错误消息：无法将属性'innerHTML'设置为null

Answer 1

  

您的代码正在此Stackblitz

中工作

您的代码似乎有效。另外，应避免使用var，应将其替换为const和let。由于您要设置内部HTML的跨度，因此除非要在其中插入跨度，否则不要重复<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);  
   }
}