web-dev-qa-db-de.com

Erkennen Klicken Sie außerhalb des Elements in angular 4 mit Anweisungen

Ich habe eine benutzerdefinierte Anweisung verwendet, um das Klicken außerhalb eines Elements in angular 2 zu erkennen, aber das Gleiche ist in angular 4 nicht möglich.

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

Wenn ich versuche, denselben Code in angle-4 zu verwenden, werden folgende Fehler angezeigt:

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

Wenn sich an der Direktivenerklärung in angular 4 etwas ändert, lassen Sie es mich bitte wissen, die offiziellen Dokumente helfen in dieser Angelegenheit nicht weiter.

20
Ronit Oommen

Es gibt nur wenige Änderungen in Bezug auf Ihre plnkr.

  1. NgModules , oder schauen Sie sich Archietcture des Frameworks an. Das Modul ist der Ort, an dem Sie Ihre Komponenten, Dienste und Anweisungen registrieren sollten
  2. Sobald Sie Ihre Direktive im Modul registriert haben, müssen Sie sie nicht mehr in Komponenten importieren

Die Richtlinie selbst sieht für mich gut aus. Ich habe deine Direktive mit meiner verglichen, die in Angular 4.3.5.

In diesem Fall benötigen Sie keine Direktive, es sei denn, sie wird nicht wiederholt verwendet. Wenn Sie diesen clickOutside nur für das Menü anwenden müssen, ist es besser, so etwas zu tun:

Binden Sie ein Klickereignis auf diese Weise an Ihren "inneren" Selektor. Nehmen wir an, es ist Ihr Menü:

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

fügen Sie dann in Ihrer Komponente die Funktion clickedInside() wie folgt hinzu:

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

Und schließlich können Sie Host Listener in Ihrer Komponente verwenden, um das Klicken auch an den Rest des Dokuments zu binden

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