Question

我正在编写Angular 2应用程序，在其中我有一个写在Bootstrap上的下拉菜单

<li class="dropdown" dropdown>
    <a class="dropdown-toggle" data-toggle="dropdown">
       User <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" aria-labelledby="download">
       <li><a routerLink="/user/profile">My Profile</a></li>
       <li><a (click)="logout()">Log Out</a></li>
    </ul>
</li>

我想要的只是写下一个切换菜单的小指令。到此为止：

@Directive({
    selector: "[dropdown]"
})
export class DropdownDirective implements OnInit {

    private isOpen = false;
    private defaultClassName: string;

    @HostListener('click') toggle() {            

    let that = this;

    if (!this.isOpen) {

        this.elRef.nativeElement.className = this.defaultClassName + " open";

        document.addEventListener("click", () => {             
            that.elRef.nativeElement.className = that.defaultClassName;
            that.isOpen = false;
            document.removeEventListener("click");
        });

        this.isOpen = !this.isOpen;
    }


    }

    constructor(private elRef: ElementRef) {

    }    

    ngOnInit(): void {
        this.defaultClassName = this.elRef.nativeElement.className;
    }

}

看起来不错。但是不起作用。经过简短的调试后，我发现添加到文档中的事件监听器在分配后才会触发。

document.addEventListener("click", () => {
                    that.elRef.nativeElement.className = that.defaultClassName;
                    that.isOpen = false;
                    document.removeEventListener("click");
});

作为一个事实菜单，在它打开后关闭。如何解决它以及为什么会发生这种情况？

Answer 1

我用[CacheResponse(Duration = 60)] public FindItemResponse Get(FindItems request) { return new FindItemResponse { ... } }解决了同样的情况。在持有下拉列表的组件上：

@HostListener()

@HostListener('document:click', ['$event']) private clickAnywhere(event: MouseEvent): void { if (this.IsSelected && !this.elementRef.nativeElement.contains(event.target)) { this.IsSelected = false; } }是我用来显示下拉列表的绑定属性。 this.IsSelected中的条件是检查用户是否已点击菜单或文档正文。

确保将elementRef注入构造函数，以便您可以访问呈现的HTML以检查是否是单击的内容： if()

您可以找到有关HostListener here的更多信息。

Angular 2 addEventListener里面的指令

1 个答案: