Question

我正在开发一个指令，其功能是向主机/父元素添加两个按钮。主/父元素将是textarea元素。我尝试使用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>旁边添加一个按钮。正确的方法是创建一个组件而不是创建指令。所有框架都在使用组件方法。

Attribute指令更改DOM的外观或行为元件。

但是在这里，你实际上正在改变结构本身。如果您只想使用属性指令进行操作，那么您应该在<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指令向host元素添加按钮

1 个答案: