使用指令检测angular 4中的单击外部元素

在angular 2中，我使用了一个自定义指令来检测元素外部的单击，但在angular 4中，这是不可能的

[plunkr]

当我尝试在angular-4中使用相同的代码时，会出现以下错误：

1. Argument of type '{ template: string; directives: typeof ClickOutside[]; }' is not assignable to parameter of type 'Component'. ==> 

    @Component({
    templateUrl: "",
    directives: [ClickOutside]
    })


2. Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'. in the directive inside ngOnInit() and ngOnDestroy() 

ngOnInit() {
    this.globalClick = Observable
        .fromEvent(document, 'click')
        .delay(1)
        .do(() => {
            this.listening = true;
         }).subscribe((event:MouseEvent) => {
            this.onGlobalClick(event);
         });
}

ngOnDestroy() {
    this.globalClick.unsubscribe();
}

1。类型为“{template:string；directives:typeof clickout[]；}”的参数不能分配给类型为“Component”的参数。=>
@组成部分({
模板URL:“”，
指令：[点击外部]
})
2.类型“Subscription”不可分配给类型“Observable”。在ngOnInit（）和ngOnDestroy（）中的指令中
恩戈尼尼特（）{
this.globalClick=可观察
.fromEvent（文档“单击”）
.延迟（1）
.do（（）=>{
这是真的；
}).订阅（（事件：MouseEvent）=>{
本.onGlobalClick（事件）；
});
}
恩贡德斯特罗（）{
this.globalClick.unsubscribe（）；
}

---

如果angular 4中的指令声明有任何变化，请告诉我，官方文件对此没有帮助。

您的plnkr几乎没有变化

，或者更确切地说，看看这个框架。模块是您应该注册组件、服务和目录的地方

一旦在模块内注册了指令，就不必在组件内导入它

指令本身对我来说很好。我将您的指令与我的指令进行了比较，该指令在Angular 4.3.5中运行良好

实际上，在这种情况下不需要任何指令，除非它不会被重复使用。如果您需要仅为菜单应用clickOutside，则最好执行以下操作：

像这样将单击事件绑定到“内部”选择器。假设这是您的菜单：

  <ul id="menu" (click)="clickedInside($event)"> <li> .. </li> </ul>

最后，您还可以在组件中使用click将其绑定到文档的其余部分

  @HostListener('document:click', ['$event']) clickedOutside($event){
    // here you can hide your menu
    console.log("CLICKED OUTSIDE");
  }

---

Oops，这一个：@Vega我遵循相同的方法，但唯一的问题是应用程序需要2000毫秒的时间来处理每次单击，这是一个令人不快的问题，因为这扭曲了UXAL节点包似乎可以用于此目的。即使是最新的Angular版本（目前Angular 6+），似乎也能正常工作。（查看此评论仅供参考）这里您有一个最小的工作演示：请忽略上面的评论，即使我停止代理降低元素菜单关闭时间为2300ms，这似乎是一个错误，但它确实有效如果您隐藏的区域是dropzone怎么办？当我单击它时，“选择文件窗口”打开，但无法调用clickedInside（）。我怎样才能缩小范围？回答我自己：然后你会想非常具体地测试事件，如果运气好的话，组件在元素和类名方面非常独特：将此作为取消选择的if条件之一：

$event.path[0]。classList[0]。startsWith（'dz'）

  @HostListener('document:click', ['$event']) clickedOutside($event){
    // here you can hide your menu
    console.log("CLICKED OUTSIDE");
  }