Angular 2 主从指令通信。指令间通信

Question

我想在 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>

笨蛋:https://plnkr.co/edit/umIE6yZwjyGGvJdYe7VS?p=preview

问题是:liWasClicked 永远不会被点击!

Answer 1

我刚刚做了一个指令来做你想做的: https://www.npmjs.com/package/ngx-selectable-list

这是主指令: https://github.com/darkbasic/ngx-selectable-list/blob/master/src/directive/selectable-list/selectable-list.directive.ts

这是从指令: https://github.com/darkbasic/ngx-selectable-list/blob/master/src/directive/selectable-item/selectable-item.directive.ts

他们通过共享服务进行通信，不幸的是这是唯一的方式。

我仍然没有为它写一个自述文件，因为我遇到了一些打包问题:因此，如果你使用 angular-cli，它目前可能只能在 AOT 模式下工作。

你可以在这里找到一些使用示例

方式一:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chat-viewer/containers/chat/chat.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chat-viewer/components/messages-list/messages-list.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chat-viewer/components/message-item/message-item.component.ts

在这种模式下，我们只进行多项选择，通过按下事件和投影的确认按钮激活。

方式二:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-lister/containers/chats/chats.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-lister/components/chats-list/chats-list.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-lister/components/chat-item/chat-item.component.ts

现在该指令在单选和多选模式下均有效:它会监听点击事件，但也会通过按下事件激活多选模式。

方式三:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/b941aa2202279c4e1c879125a8551b0c4649e7d8/src/app/chats-lister/containers/chats/chats.component.ts

我以前总是通过内容投影来投影确认按钮，但您可以采用不同的方式:相反，您可以监听 selectItemIds 事件并在用户点击您自己的确认按钮后发出 selectionConfirmed 事件。

方式四:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-creation/containers/new-group/new-group.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-creation/components/users-list/users-list.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-creation/components/user-item/user-item.component.ts

在此示例中，指令在 multiple_tap 模式下工作:多重选择由点击而不是按下事件初始化。

一旦我编写文档并附上一些 GIF 以显示不同的模式，一切都会变得更加清晰。