4
：角2のマスタスレーブディレクティブ通信。インターディレクティブ私はAngular2で選択可能なリストを作成したい通信
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
問題is：liWasClickedは決してクリックされません！
私はここで同じ問題に直面しています。子供の指示に親の指示を伝えることはできません。誰でも助けることができますか？ – soywod
@soywodディレクティブにテンプレートがある場合、イベントは機能しますが、私の場合はそうではありません。 – dalvarezmartinez1