Angular 2主从指令通信.国际指令沟通

发布时间：2020-12-17 17:01:15 所属栏目：安全来源：网络整理

导读：我想在Angular2中创建一个可选择的列表： import {Directive,ElementRef,HostListener,Input,Output,EventEmitter} from "@angular/core";@Directive({selector: 'li'})export class ListItem { @Input() private selectableItem: any; @Output('selectedEve

我想在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永远不会被点击！

解决方法

我刚刚制定了一个指令来做你想要的：
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模式下工作.

您可以在这里找到一些用法示例

模式1：

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

在此模式下,我们只进行多项选择,通过按下事件和投影确认按钮激活.

模式2：

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

现在该指令在单模式和多模式下都可以工作：它会监听点击事件,但它也会通过按下事件激活多选模式.

模式3：

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

我之前总是通过内容投影预测确认按钮,但您可以采用不同的方式：相反,您可以监听selectItemIds事件,并在用户单击您自己的确认按钮后发出selectionConfirmed事件.

模式4：

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模式下工作：多次选择由tap而不是press事件初始化.

一旦我编写文档并附加一些GIF来显示不同的模式,一切都会更清晰.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!