import {Directive,ElementRef,HostListener,Input,Output,EventEmitter} from "@angular/core";

@Directive({selector: 'li'})
export class ListItem {

   @Input() private selectableItem: any;
   @Output('selectedEvent') private selectedEvent: EventEmitter<any> = new EventEmitter<any>();

   constructor(private hostElement: ElementRef) {
   }

   @HostListener('click',['$event'])
   private toggleSelected(event: MouseEvent): void {
       this.hostElement.nativeElement.classList.toggle('selected');
       this.selectedEvent.emit(this.selectableItem);
   }

}



@Directive({selector: '[selectableList]'})
export class SelectableListDirective {

   constructor(private hostElement: ElementRef) {
   }

   @HostListener('selectedEvent',['$event'])
   private liWasClicked(event): void {
       console.log(event);
   }
}

而我正试图这样使用它：

<ul selectableList>
    <li *ngFor="let item of items" [selectableItem]="item">
        <span>{{item}}</span>
    </li>
</ul>

Plunker：https://plnkr.co/edit/umIE6yZwjyGGvJdYe7VS?p=preview

问题是：liWasClicked永远不会被点击！