使用 angular 指令将按钮添加到宿主元素

Question

我正在开发一个指令，其功能是向 host/parent 元素添加两个按钮。 Host/parent 元素将是一个文本区域元素。我尝试使用renderer2的createElement、appendChild方法来实现。渲染器二正在创建这些按钮并像这样添加到主机元素。

<textarea _ngcontent-c0="" appmarkdown=""><div _ngcontent-c0=""><button _ngcontent-c0="">Hello world</button></div></textarea>

但是这种方式按钮是不可见的。谁能帮我解决这个问题。

我的指令代码。

enter code here          import { Directive, Output, EventEmitter, Renderer2, ElementRef, OnInit } from '@angular/core';

      @Directive({
        selector: '[appMarkDown]',
        host:{
          '(keyup)': 'onKey($event.target.value)'
        }
      })
      export class MarkDownDirective implements OnInit {

        constructor(private renderer:Renderer2,private element:ElementRef) { }

        @Output() valuechange:EventEmitter<any> = new EventEmitter();

        private nativeElement : Node;

        ngOnInit() {
          this.nativeElement = this.element.nativeElement;
          const div = this.renderer.createElement('div');
          const button= this.renderer.createElement('button');
          const text = this.renderer.createText('Hello world');
          this.renderer.appendChild(button, text);
          this.renderer.appendChild(div, button);
          this.renderer.appendChild(this.nativeElement, div);
          this.renderer.nextSibling(this.nativeElement)
        }

        onKey(event:KeyboardEvent){
          this.valuechange.emit(event);
        }
      }

Answer 1

因为您正在尝试在 <textarea></textarea>using 属性指令旁边添加一个按钮。正确的方法是创建一个组件而不是创建指令。所有框架都在使用组件方法。

An Attribute directive changes the appearance or behavior of a DOM element.

但在这里，您实际上是在更改结构本身。如果你只想借助属性指令来做这件事，那么你应该在 <div> 上应用指令，你可以在其中插入 <textarea> 和 <button>。

如果您不想更改代码，那么您应该选择

 ngOnInit() {
          this.nativeElement = this.element.nativeElement;
          const div = this.renderer.createElement('div');
          const button= this.renderer.createElement('button');
          const text = this.renderer.createText('Hello world');
          this.renderer.appendChild(button, text);
          this.renderer.appendChild(div, button);
          this.renderer.insertBefore(this.element.nativeElement.parentNode, div, this.element.nativeElement.nextSibling);
        }

这是工作解决方案link

使用 angular 指令将按钮添加到宿主元素

Adding button to host element using a angular directive

angular2-directives

angular