Обнаружение Нажмите внешний элемент в угловом 4 с помощью директив

Я использовал настраиваемую директиву для обнаружения щелчка вне элемента в угловом 2, но то же самое невозможно в угловом 4.

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

Когда я пытаюсь использовать один и тот же код в угловом-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();
}

Если есть какие-либо изменения в объявлении директивы в угловом 4, пожалуйста, дайте мне знать, официальные документы не помогут в этом вопросе.

Ответ 1

Есть несколько изменений в отношении вашего plnkr.

NgModules, или, скорее, взглянуть на Archietcture framework. Модуль - это место, где вы должны регистрировать свои компоненты, службы и руководства
После регистрации внутреннего модуля вашей директивы вам не нужно импортировать его внутри компонентов

Сама директива выглядит хорошо для меня. Я сравнил вашу директиву с моей, которая отлично работает в 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 в своем компоненте, чтобы привязать клик к остальной части документа

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