Erkennen, Klicken Sie außerhalb des Elements in eckigen 4 using-Direktiven

Habe ich eine benutzerdefinierte Richtlinie zu erkennen, klicken Sie neben einem element im Winkel 2, aber das gleiche ist nicht möglich, im Winkel 4.

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

Wenn ich versuche über den gleichen code in eckige-4, bekomme ich folgenden Fehler:

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 es eine änderung in der Richtlinie Erklärung in eckigen 4 bitte lassen Sie mich wissen, die offiziellen docs nicht helfen in dieser Angelegenheit.

Hoppla, dieses hier: stackoverflow.com/a/45997092/5468463
Ich bin nach der gleichen Methode, aber das einzige problem ist, dass die Anwendung braucht Zeit " 2000ms zu jedem Prozess auf, das ist ein doofer als dies verzerrt die UX
Auch ng-klicken Sie auf-außerhalb - Knoten-Paket scheint zu funktionieren für diesen Zweck. Scheint zu funktionieren, auch mit der neuesten Eckige version (Winkel-6+ im moment). (siehe diesen Kommentar als ein nur-für-Informationen)

InformationsquelleAutor Ronit | 2017-09-02

  1. 36

    Gibt es einige änderungen in Bezug auf Ihre plnkr.

    1. NgModules, oder eher werfen Sie einen Blick auf Archietcture der Rahmen. Das Modul ist der Ort, wo sollten Sie sich Ihre Komponenten, Dienstleistungen und directices
    2. Sobald Sie registriert sind Ihre Richtlinie innen-Modul, die Sie nicht haben, um es zu importieren inneren Bauteile

    Die Richtlinie selbst sieht gut aus für mich. Ich verglich Ihre Richtlinie mit mir, das funktioniert in Eckigen 4.3.5.

    Tatsächlich, Sie brauchen keine Richtlinie in diesem Fall, sofern es nicht verwendet werden repetitive. Wenn Sie brauchen, um zu übernehmen, clickOutside nur für die Menü-es wäre besser, zu tun, sth so:

    Binden, klicken Sie auf Ereignis, um Ihre "innen" - Selektor wie. Sagen wir, es ist Ihr Menü:

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

    dann innerhalb Ihrer Komponente hinzufügen clickedInside() Funktion wie diese:

      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 zu binden, klicken Sie auch auf den rest des Dokuments

      @HostListener('document:click', ['$event']) clickedOutside($event){
    //here you can hide your menu
    console.log("CLICKED OUTSIDE");
  }
    Hier haben Sie minimal funktionsfähige demo: plnkr
    bitte ignorieren Sie die oben Kommentar, Auch wenn ich Halt Vereinbarung, um den unteren Elementen, die das Menü zu schließen ist " 2300ms das scheint wie ein Fehler, aber ja es funktioniert definitiv
    was ist, wenn die zone, in der Sie sich verstecken ist ein dropzone? wenn ich es auf die "wählen Sie Dateien-Fenster" geöffnet, aber die clickedInside() nicht aufgerufen werden. wie kann ich den schmalen Spektrum?
    Antwort an mich selbst : dann werden Sie wollen testen Sie die Veranstaltung ziemlich speziell, mit etwas Glück die Komponente ist sehr einzigartig in seinem element und Klassennamen : haben Sie das als einen der Ihren, wenn die Bedingungen zu deaktivieren : !$event.path[0].classList[0].startsWith('dz')

    InformationsquelleAutor Kuba

Schreibe einen Kommentar