Javascript 角度4-组件选择器未显示HTML元素

我需要拖放（HTML5）组件选择器，它应该转换成相关的HTML元素。但我看到的是HTML中的组件选择器

我只是简单地描述一下-

我做了两个自定义属性指令来拖放字段

<button md-raised-button type="button" draggable="true" dragTextField>Text Field</button>

这里的

dropFields

是另一个用于处理

drop

和

dragover

事件的自定义属性指令

以下是处理拖放操作的

@HostListener

事件-

@Directive({ selector: '[dragTextField]' })
export class DragTextFieldDirective {

constructor(private el: ElementRef) { }

@HostListener('dragstart', ['$event']) ondragstart(event) {
    this.dragstart_handler(event);
}

private dragstart_handler(event) {
    event.dataTransfer.setData("text", "<ang-textfield></ang-textfield>");
    event.dataTransfer.setData("text/plain", "<ang-textfield></ang-textfield>");
    event.dataTransfer.setData("text/html", "<ang-textfield></ang-textfield>");
    event.dataTransfer.setData("text/uri-list", "<ang-textfield></ang-textfield>");
    event.dropEffect = "copy";
}}
@Directive({ selector: '[dropFields]' })
export class DropFieldsDirective {

constructor(private el: ElementRef) { }

@HostListener('drop', ['$event']) ondrop(event) {
    event.preventDefault();
    this.drop_handler(event);
}

@HostListener('dragover', ['$event']) ondragover(event) {
    event.preventDefault();
    this.drag_over_handler(event);
}

private drop_handler(event) {
    var data = event.dataTransfer.getData("text/html");
    var div = document.createElement('div');
    div.innerHTML = data;
    console.log(div);
    event.target.appendChild(div);
    return false;
}

private drag_over_handler(event) {
    event.dataTransfer.dropEffect = "copy";
}}

console.log（div）

将提供HTML元素，而不是

@Directive({ selector: '[dragTextField]' })
export class DragTextFieldDirective {

constructor(private el: ElementRef) { }

@HostListener('dragstart', ['$event']) ondragstart(event) {
    this.dragstart_handler(event);
}

private dragstart_handler(event) {
    event.dataTransfer.setData("text", "<ang-textfield></ang-textfield>");
    event.dataTransfer.setData("text/plain", "<ang-textfield></ang-textfield>");
    event.dataTransfer.setData("text/html", "<ang-textfield></ang-textfield>");
    event.dataTransfer.setData("text/uri-list", "<ang-textfield></ang-textfield>");
    event.dropEffect = "copy";
}}
@Directive({ selector: '[dropFields]' })
export class DropFieldsDirective {

constructor(private el: ElementRef) { }

@HostListener('drop', ['$event']) ondrop(event) {
    event.preventDefault();
    this.drop_handler(event);
}

@HostListener('dragover', ['$event']) ondragover(event) {
    event.preventDefault();
    this.drag_over_handler(event);
}

private drop_handler(event) {
    var data = event.dataTransfer.getData("text/html");
    var div = document.createElement('div');
    div.innerHTML = data;
    console.log(div);
    event.target.appendChild(div);
    return false;
}

private drag_over_handler(event) {
    event.dataTransfer.dropEffect = "copy";
}}

private drop_handler(event) {
var data = event.dataTransfer.getData("text/html");
var div = document.createElement('div');
div.innerHTML = data;
console.log(div);
event.target.appendChild(div);
return false;}