Ich habe einen Mehrkomponenten-Seitenleisten-Umschalter, App / Schaltfläche / Seitenleiste sind alle in ihren eigenen Komponenten, Schaltfläche / Seitenleiste sind untergeordnete Elemente der App (oder zumindest in der App-Komponente geladen, vorausgesetzt, dies ist ein untergeordnetes Element).

Der komponentenübergreifende Kommunikationsaspekt von Angular ist noch nicht ganz auf dem neuesten Stand. In diesem Fall nutze ich einen Dienst.

Was ich suche: Wenn weder auf die -Schaltfläche noch auf die Seitenleiste geklickt wird (etwas außerhalb dieser beiden Komponenten) ... Seitenleiste reduzieren.

Derzeit schalte ich einen booleschen Status für eine "sichtbare" Variable in einem Dienst um, um das Navi zu erweitern / zu reduzieren.

Ich habe alle Arten von Methoden mit wenig Erfolg ausprobiert. Wie kann dies erreicht werden? Oder zumindest irgendwo, wo ich lesen kann, um näher zu kommen und es von dort zu nehmen?

Code: https://stackblitz.com/edit/multi-component-communication

2
darcher 18 Jän. 2019 im 23:32

3 Antworten

Beste Antwort

Ihr aktueller Code funktioniert, wenn der Ereignishandler document:click das Flag visible umschaltet:

@HostListener("document:click", ["$event"])
onClick(event) {
  this.visible = this._ref.nativeElement.contains(event.target);
}

Stoppen Sie die Ereignisweitergabe, um zu verhindern, dass der Klick auf die Schaltfläche die Dokumentebene erreicht:

<toggle-sidebar (click)="$event.stopPropagation()"></toggle-sidebar>

Eine Demo finden Sie unter diesem Stackblitz.

1
ConnorsFan 19 Jän. 2019 im 02:13

Sie können clickOutSide sowohl in der Seitenleiste als auch in der Schaltfläche verarbeiten. Wenn beide außerhalb angeklickt werden, schließen Sie die Seitenleiste. Sie können dasselbe mit @ Output / EventEmitter in beiden untergeordneten Komponenten erreichen und diese in Ihrer app.component.ts - Datei anhören.

Um es zusammenzufassen:

  1. Aktivieren Sie clickOutSide in der Seitenleiste und geben Sie dasselbe an das übergeordnete Element aus, d. H. app.component.ts
  2. Aktivieren Sie clickOutSide in der Umschalttaste und geben Sie dasselbe an das übergeordnete Element aus, d. H. app.component.ts
  3. Behandeln Sie in app.component.ts die obigen Emits und führen Sie Überprüfungen durch:
    • Wenn die Umschalttaste nach außen geklickt wird, das Sidenav nach außen geklickt wird und das Sidenav geöffnet ist, sollten wir das Sidenav schließen.
    • Wenn die Umschalttaste innen funktional angeklickt wird, wird sidenav außen angeklickt. Aber wir müssen sidenav ändern, um hinein zu klicken. Also werden wir dieses Flag manuell ändern. Andernfalls wird sidenav geschlossen, wenn Sie in sidenav, aber außerhalb der Umschalttaste klicken.

Ich habe Ihren Stackblitz hier unter Berücksichtigung der oben genannten Szenarien bearbeitet.

1
shhdharmen 18 Jän. 2019 im 21:54

Sie sollten eine Direktive verwenden, um das Klicken im Außenbereich anzuhören:

import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    @Output() clickOutside: EventEmitter<Event> = new EventEmitter<Event>();

    constructor(private elementRef: ElementRef) { }

    @HostListener('document:mousedown', ['$event'])
    onDocumentClick(event: Event) {
        if (!this.isClickInElement(event)) {
            this.clickOutside.emit(event);
        }
    }

    private isClickInElement(event: Event): boolean {
        return this.elementRef.nativeElement.contains(event.target);
    }
}

Wenn Sie nun das Menü haben, hängen Sie diese Anweisung an und binden Sie sie an die Ausgabe. Rufen Sie die Methode auf, um die Seitenleiste zu reduzieren oder Ihre Aktion auszuführen. Ex:

<ol (clickOutside)="collapseSideBar()">
0
nircraft 18 Jän. 2019 im 20:44