Javascript 角度4-组件选择器不在自定义指令中工作

我正在使用HTML5在Angular 4中进行拖放。我创建了两个自定义属性指令来处理拖放事件

一切正常，但当我尝试拖动组件选择器时，我希望它应该转换为HTML元素。但是组件选择器本身就在那里-

我实现了

ang textfield

组件选择器，还添加了

app.module声明

这里有两条指令-

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

public textFieldFlag: true;

constructor(private el: ElementRef) { }

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

private dragstart_handler(event) {
    let textfield_dom = "<ang-textfield></ang-textfield>";
    event.dataTransfer.setData("text", textfield_dom);
    event.dataTransfer.setData("text/plain", textfield_dom);
    event.dataTransfer.setData("text/html", textfield_dom);
    event.dataTransfer.setData("text/uri-list", textfield_dom);
    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";
}}

这是

ng模块

-

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    BrowserModule,
    HttpModule,
    MdTabsModule,
    MdInputModule,
    MdButtonModule,
    MdCardModule,
    BrowserAnimationsModule
],
declarations: [
    AppComponent,
    FormsViewComponent,
    EmailViewComponent,
    MessageViewComponent,
    SettingsViewComponent,
    AdditionalSettingsViewComponent,
    FormListViewComponent,
    TextFieldViewComponent,
    AddFormViewComponent,
    AllFormsViewComponent,
    DragTextFieldDirective,
    DropFieldsDirective
],
providers: [
]
})

我的代码有什么问题

---

谢谢

伙计，有什么问题吗？我不能让

和textfield

工作。这是一个组件选择器。文本字段后面的组件在哪里？其中是@Component（{selector:'ang-textfield'），我实现了它，并将它添加到

app.module

声明中。但它不能让我使用该组件和ng模块
@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    BrowserModule,
    HttpModule,
    MdTabsModule,
    MdInputModule,
    MdButtonModule,
    MdCardModule,
    BrowserAnimationsModule
],
declarations: [
    AppComponent,
    FormsViewComponent,
    EmailViewComponent,
    MessageViewComponent,
    SettingsViewComponent,
    AdditionalSettingsViewComponent,
    FormListViewComponent,
    TextFieldViewComponent,
    AddFormViewComponent,
    AllFormsViewComponent,
    DragTextFieldDirective,
    DropFieldsDirective
],
providers: [
]
})