Angular 4 - Component selector not working in custom directive

问题

I am working with HTML 5 drag and drop in Angular 4. I created two custom attributes directive to handle drag and drop events.

Everything works fine except when i am trying to drag a component selector i expected it should be converted to HTML elements. But component selector itself there -

<div><ang-textfield></ang-textfield></div>

I implemented ang-textfield component selector and also added to app.module declarations

Here are two directives -

@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";
}}

I implemented ang-textfield component selector to output Textfield like -

<div><label>Textfield</label><input type="text" /></div>

Here is the ang-textfield implementation -

import { Component } from '@angular/core';

@Component({
selector: 'ang-textfield',
templateUrl: './textfield.component.html'
})

export class TextFieldViewComponent {

constructor(){

}}

Here is the ng-module -

@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: [
]
})

What is wrong with my code?

Thanks!

来源：https://stackoverflow.com/questions/45998572/angular-4-component-selector-not-working-in-custom-directive

标签

javascript

html

angular

drag-and-drop