Détecter Cliquer sur l'élément extérieur dans l'angle 4 en utilisant les directives

J'ai utilisé un personnalisé directive pour détecter cliquez sur l'extérieur d'un élément angulaire 2 mais cela n'est pas possible dans angulaire 4.

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

Quand j'ai essayer d'utiliser le même code dans angulaires-4 j'obtiens les erreurs suivantes:

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();
}

Si il y a un changement dans la directive déclaration angulaire 4 s'il vous plaît laissez-moi savoir, l'officiel docs ne sont d'aucune aide dans cette affaire.

source d'informationauteur Ronit

  1. 32

    Il y a peu de changements par rapport à votre plnkr.

    1. NgModulesou plutôt de prendre un coup d'oeil sur Archietcture du cadre. Le module est l'endroit où vous devriez vous inscrire à vos composants, des services et des directices
    2. Une fois que vous avez enregistré votre intérieur de directive module, vous n'avez pas à importer à l'intérieur des composants

    La directive elle-même a l'air bien pour moi. J'ai comparé votre directive avec le mien qui fonctionne très bien dans Angulaire 4.3.5.

    En fait, vous n'avez pas besoin d'une directive dans ce cas, à moins que cela ne sera pas utilisé à répétition. Si vous avez besoin de l'appliquer clickOutside uniquement pour le menu qu'il serait mieux de faire qqch comme ça:

    Cliquez sur lier un événement à votre "intérieur" sélecteur comme ça. Disons que c'est votre menu:

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

    puis à l'intérieur de vos composants à ajouter clickedInside() fonction comme ceci:

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

    Et enfin, vous pouvez utiliser Accueil Auditeur dans votre composant pour lier cliquez aussi pour le reste du document

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