Wie EventEmitter verwenden (onClose) die sidenav

Question

ich will, wenn überprüfen meine

<md-sidenav> 

geschlossen zu werden. Gibt es eine Möglichkeit, den EventEmitter onClose meines Sitenav-Objekts zu verwenden, um das zu überprüfen? und können Sie mir ein Beispiel geben?

Answer 1

Dies ist auf zwei verschiedene Arten möglich - über die Vorlage und innerhalb des Komponentencodes selbst.

eine HTML-Vorlage Unter der Annahme, wie die folgenden:

<md-sidenav-container> 
    <md-sidenav #mySidenav (close)="onClose()" mode="side"> 
    This is sidenav content 
    </md-sidenav> 
    <button md-raised-button (click)="mySidenav.toggle()">Toggle Sidenav</button> 
</md-sidenav-container> 

In Ihrer Komponente, die Sie so etwas wie dieses haben:

import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core'; 
import { MdSidenav } from '@angular/material' 
import { Subscription } from 'rxjs' 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements AfterViewInit { 

    @ViewChild('mySidenav') 
    sidenav: MdSidenav; 

    subscription: Subscription; 

    ngAfterViewInit(): void { 
    this.subscription = this.sidenav.onClose.subscribe(() => 
     console.log("Closed event from observable")); 
    } 

    ngOnDestroy(): void { 
    this.subscription.unsubscribe(); 
    } 

    onClose(): void { 
    console.log("Closed event from template"); 
    } 

} 

Technik 1 ist ein Ereignis verbindlich zu verwenden. Dies ist der (close)="onClose()" Abschnitt der Vorlage. Immer wenn das Schließen-Ereignis durch das Sidentenav ausgelöst wird, wird der in den Anführungszeichen (z. B. onClose()) angegebene Code ausgeführt. In diesem Szenario wird die Methode onClose() (die im Komponentencode definiert ist) aufgerufen und gibt Text an die Konsole aus. Sie können mehr über diese Technik in der Event Bindings section of the angular documentation.

Technik 2 herausfinden, um das Ereignis im Komponentencode selbst zu abonnieren. In dieser Technik exportieren wir das Sitenav als die Variable mySidenav. Dies ist der #mySidenav Abschnitt der Vorlage. Im Komponentencode können wir einen Verweis auf das Sitenav erhalten, indem wir die @ViewChild('mySidenav') Annotation verwenden. Wenn unsere Komponente initialisiert wird, können wir auf das Sitenav zugreifen und somit etwas Code ausführen, wann immer das Schließen-Ereignis ausgelöst wird. In diesem Szenario verwenden wir die subscribe() Methode der Observable Schnittstelle. Es ist wichtig, das Abonnement abzubestellen, wenn das Compoenent zerstört wird, um Speicherlecks zu vermeiden, daher der unsubscribe() Anruf in ngOnDestroy(). Sie können mehr über Observable in der Observables section of the rxjs documentation herausfinden.

Answer 2

Es ist eigentlich sehr einfach, wie unten

HTML

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav" (close)="onClose()" > 
    Jolly good! 
    </md-sidenav> 

    <div class="example-sidenav-content"> 
    <button md-button (click)="sidenav.open()"> 
     Open sidenav 
    </button> 
    </div> 

</md-sidenav-container> 

die Methode in Komponentenklasse Handhabung als

onClose(){ 
    window.alert('closed the side nav bar'); 

    } 

LIVE DEMO