HostListener не прослушивается для события CdkDragDrop с использованием пользовательской директивы Angular6 - PullRequest
Новая
       12

HostListener не прослушивается для события CdkDragDrop с использованием пользовательской директивы Angular6

0 голосов
/ 20 декабря 2018
  • Я работаю с модулем angular6 CdkDragDrop.

  • Я попытался создать пользовательскую директиву "appRenderControl" , которая будет прослушивать событие CdkDragDrop , когда элемент помещается в контейнер.

    Однако в настоящее время директива не прослушивается.

Ниже приведен мой код, может кто-нибудь указать, что идет не так.

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content >

        <div id="controls" cdkDropList  #inactiveList="cdkDropList" 
        [cdkDropListConnectedTo]="[activeList]">

            <div class="control-button" *ngFor="let item of  controls" cdkDrag >
              <div class="custom-drag-drop" *cdkDragPlaceholder>{{item}} </div>
              {{item}}
            </div>

        </div>
        </mat-card-content>
    </mat-card>
  </div>

   <div [style.background]="'white'" id='preview' cdkDropList
   #activeList='cdkDropList' appRenderControl>
    </div>
</div>


  </div>

</div>

Directive.ts 

import { Directive, HostListener} from '@angular/core';
import {CdkDragDrop} from '@angular/cdk/drag-drop';
@Directive({
  selector: '[appRenderControl]'
})
export class RenderControlDirective {

constructor() {

}

  //This is not being listened 
@HostListener('CdkDragDrop', ['$event'])
onItemDropped(event: CdkDragDrop<string[]>): void {
   console.log('directive being called')
 }
}
...