使用指令檢測角度4中的Click外部元素

Question

我使用了一個自定義指令來檢測角度2中某個元素的外部單擊，但是在角度4中是不可能的。

[plunkr] https://plnkr.co/edit/aKcZVQ?p=info

當我嘗試在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();
}

如果angular 4的指令聲明有任何變化，請告訴我，官方文檔在這方面沒有幫助。

Answer 1

與plnkr的關系很少。

1. NgModules ，或者更確切地說，采取一看Archietcture框架。 該模塊是您應該注冊組件，服務和指令的地方
2. 在模塊中注冊指令后，您無需將其導入組件中

該指令本身對我來說很好。 我將您的指令與在Angular 4.3.5中可以正常工作的我的指令進行了比較。

實際上，在那種情況下，您不需要任何指令，除非不會重復使用它。 如果您僅需要將clickOutside應用於菜單，最好這樣做：

像這樣將點擊事件綁定到您的“內部”選擇器。 假設這是您的菜單：

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

然后在組件內部添加clickedInside()函數，如下所示：

  clickedInside($event: Event){
    $event.preventDefault();
    $event.stopPropagation();  // <- that will stop propagation on lower layers
    console.log("CLICKED INSIDE, MENU WON'T HIDE");
  }

最后，您可以在組件中使用Host Listener來將click也綁定到文檔的其余部分

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