Пройдите через внутренний элемент DOM и замените внутренний DOM, используя угол 2+

Question

Я пытаюсь получить доступ к внутренней DOM, используя только имена классов или теги html (как я использую библиотеку), и пытаюсь заменить на какой-то тег.Пробовал использовать 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.Поскольку вы устанавливаете 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);  
   }
}