が持つEventEmitterの使用方法（OnCloseの）sidenav

Question

の私は、私の

<md-sidenav> 

が閉じ取得されたときにチェックしたいです。 私のsidenavオブジェクトのEventEmitter onCloseを使ってそれを確認する方法はありますか？ あなたは私に例を挙げることができますか？

Answer 1

これはテンプレートとコンポーネントコード自体の2つの方法で可能です。

次のようなHTMLテンプレートと仮定：

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は、結合事象を使用することです：あなたはこのような何かを持つことができ、あなたのコンポーネントで

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

を。これはテンプレートの(close)="onClose()"セクションです。サイドイベントによってクローズイベントが発生するたびに、引用符で指定されたコード（つまりonClose()）が実行されます。このシナリオでは、メソッドonClose()（コンポーネントコードで定義されています）が呼び出され、何らかのテキストがコンソールに出力されます。このテクニックの詳細については、Event Bindings section of the angular documentation.

テクニカル2は、コンポーネントコード自体でイベントを購読することです。このテクニックでは、変数sidenavを変数mySidenavとしてエクスポートします。これはテンプレートの#mySidenavセクションです。コンポーネントコードでは、@ViewChild('mySidenav')アノテーションを使用してsidenavへの参照を取得できます。私たちのコンポーネントが初期化されると、sidenavにアクセスして、closeイベントが発生するたびにコードを実行することができます。このシナリオでは、Observableインターフェイスのsubscribe()メソッドを使用します。コンパニオンが破棄されてメモリリークが発生しないようにするには、サブスクリプションの登録を解除することが重要です。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