Как использовать EventEmitter (OnClose) из sidenav

Question

Я хочу, чтобы проверить, когда мой

<md-sidenav> 

становится закрытым. Есть ли способ использовать EventEmitter onClose моего объекта sidenav, чтобы проверить это? и не могли бы вы привести мне пример?

Answer 1

Это возможно двумя различными способами - через шаблон и внутри самого кода компонента.

Предполагая, что шаблон HTML, такие как:

<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> 

В компоненте вы можете иметь что-то вроде этого:

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

} 

Техника 1 является использование привязки события. Это (close)="onClose()" раздел шаблона. Всякий раз, когда событие закрытия запускается с помощью sidenav, запускается код, указанный в кавычках (то есть onClose()). В этом случае вызывается метод onClose() (который определен в коде компонента) и печатает какой-либо текст на консоли. Вы можете узнать больше об этой методике в Event Bindings section of the angular documentation.

Техника 2 должна подписаться на событие в самом коде компонента. В этой технике мы экспортируем sidenav как переменную mySidenav. Это #mySidenav раздел шаблона. В коде компонента мы можем получить ссылку на sidenav, используя аннотацию @ViewChild('mySidenav'). Когда наш компонент инициализирован, мы можем получить доступ к sidenav и, следовательно, запускать некоторый код всякий раз, когда запускается событие close. В этом случае мы используем метод subscribe() интерфейса Observable. Важно отказаться от подписки на подписку, когда компонент уничтожен, чтобы предотвратить утечку памяти, поэтому вызов unsubscribe() в ngOnDestroy(). Вы можете узнать больше о наблюдаемых в Observables section of the rxjs documentation.

Answer 2

Ее на самом деле очень просто, как показано ниже

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> 

Обработка метод в классе компонентов, как

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

    } 

LIVE DEMO