时间戳

首页 > 解决方案 > 使用角度指令向宿主元素添加按钮

angular - 使用角度指令向宿主元素添加按钮

问题描述

我正在开发一个指令，其功能是向主机/父元素添加两个按钮。主机/父元素将是一个 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);
        }
      }

标签： angularangular2-directives

解决方案

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

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);
        }

这是工作解决方案的链接

推荐阅读