1

我想使用指令来修改 DOM，但是在this.el.nativeElement指令内部使用时，它返回 DOM 和我期望的所有元素，但是在使用querySelectorAll时返回一个空的 NodeList。

奇怪的是， usingAfterViewChecked解决了问题，但同时被多次触发，创建了多个按钮。AfterViewInit提供与 相同的结果OnInit。

@Directive({
  selector: '[appAddButton]'
})
export class AddButtonDirective implements OnInit {

  constructor(
    private el: ElementRef<HTMLElement>,
    private renderer: Renderer2
  ) { }

  ngOnInit(): void {
    console.log(this.el.nativeElement) // Returns the DOM of the element and contains all the elements with the class of .element.
    console.log(this.el.nativeElement.querySelectorAll('.element')) // Returns an empty NodeList
    
    const element= this.el.nativeElement.querySelectorAll('.element');
    element.forEach(element => { // Doesn't loop as empty NodeList
       this.createButton(element)
    });
  }

  createButton(element: Element) {
    const button = this.renderer.createElement('button');
    this.renderer.setAttribute(button, 'type', 'button');
    this.renderer.appendChild(button, this.renderer.createText('Button Text'));
    this.renderer.insertBefore(element.parentNode, button, element.nextSibling);
  }
}

有谁知道可能出了什么问题并可以提供解决方案？

4

0 回答 0