使用角度指令将按钮添加到主机元素

Question

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

属性指令更改 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);
}

这是工作解决方案的链接