通过指令中的 renderer2 在 textarea 中添加了一个按钮，但它在浏览器中不可见，尽管我可以在控制台中看到它

Question

我正在尝试在指令中通过 renderer2 动态地将按钮添加到文本区域。但是按钮不可见。下面是我的指令代码-

@Directive({
  selector: '[appMain]'
})
export class MainDirective {
  @Input() initial: string; inText: string;
  constructor(private el : ElementRef, private rend: Renderer2) {
    let r= this.rend.createElement('button');
    let t= this.rend.createText('Click Me!');
    this.rend.appendChild(r, t);
    this.rend.appendChild(this.el.nativeElement,r);
    this.rend.setStyle(r, 'display', 'block');
    console.log(this.el.nativeElement);  

   }

当我控制台记录 nativeElement 时，按钮可见。snapshot of console.log

Answer 1

可能想添加到原生元素中

el.nativeElement.insertAdjacentHTML('beforeend', r);

通过指令中的 renderer2 在 textarea 中添加了一个按钮，但它在浏览器中不可见，尽管我可以在控制台中看到它

Added a button in the textarea through renderer2 in a directive, but it isn't visible in the browser, though I can see it in console

angular

angular-renderer2