使用Renderer2动态渲染元素报错：选择器'myDIV'未匹配到元素

嘿，我来帮你搞定这个问题！你遇到的报错主要有两个核心原因，咱们一步步来修正：

1. CSS选择器使用错误 #

你在selectRootElement里传的'myDIV'是在找标签名为myDIV的元素，但你的HTML里是给div设置了id="myDIV"，所以正确的CSS选择器应该是'#myDIV'（用#前缀表示匹配id属性）。

2. 确保DOM已完成渲染 #

Angular组件初始化时，ngOnInit阶段视图还没完全渲染完毕，如果这时调用renderButtons，自然找不到目标元素。你需要把方法调用放到ngAfterViewInit钩子中——这个钩子会在组件视图完全渲染完成后触发，是操作DOM的安全时机。

修改后的TS代码示例 #

import { Component, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit(): void {
    // 视图渲染完成后再执行DOM操作
    this.renderButtons();
  }

  renderButtons(){ 
    const element = this.renderer.selectRootElement('#myDIV'); 
    const text = this.renderer.createText('something'); 
    this.renderer.appendChild(element, text); 
  }
}

对应的HTML代码（无需修改） #

<div id="myDIV"> </div>

更推荐的Angular风格写法 #

其实用@ViewChild获取DOM元素更符合Angular的最佳实践，也能避免直接用选择器可能出现的找不到元素问题，示例如下：

import { Component, Renderer2, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {
  // 通过模板引用变量获取元素
  @ViewChild('myDIV') myDiv!: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit(): void {
    this.renderButtons();
  }

  renderButtons(){ 
    const text = this.renderer.createText('something'); 
    this.renderer.appendChild(this.myDiv.nativeElement, text); 
  }
}

对应的HTML需要添加模板引用变量：

<div #myDIV> </div>

这样调整后，就不会再出现找不到元素的错误啦！

内容的提问来源于stack exchange，提问作者user11952136