使用自定义指令Angular6在CdkDragDrop事件上未侦听HostListener

Question

• 我正在使用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')
 }
}