我想在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
问题是：liWasClicked永远不会被点击！
答案 0 :(得分：0)
我刚刚制定了一个符合你想要的指令： https://www.npmjs.com/package/ngx-selectable-list
他们通过共享服务进行通信，不幸的是，这是唯一的方法。
我仍然没有设法为它编写自述文件，因为我遇到了一些包装问题：因此，如果你使用angular-cli，它现在可能只能在AOT模式下工作。
您可以在这里找到一些用法示例
模式1：
在此模式下，我们只进行多项选择，由按下事件和预计确认按钮激活。
模式2：
现在该指令同时适用于单一和多种模式：它会监听点击事件，但它也会通过按下事件激活多重选择模式。
模式3：
我之前总是通过内容投影预测确认按钮，但您可以采用不同的方式：相反，您可以在用户点击自己的确认按钮后收听selectItemIds事件并发出selectionConfirmed事件。
模式4：
在此示例中，该指令在multiple_tap模式下工作：多次选择由tap而不是press事件初始化。
一旦我写完文档并附上一些GIF来展示不同的模式，一切都会更清晰。