ボタンの角度を閉じるsidenavをクリックする

Question

私はアプリケーションにAngular 4 Material Sidenavを持っています。その中にはいくつかのボタンがあり、その中には関数を呼び出すものや、他のページに進むものがあります。

すべてのボタンが同じ機能を呼び出すのではなく、どの機能を呼び出すか（送信されたパラメータのスイッチのように）、子供のクリックでサイドボタンを閉じるための組み込みの方法がありますか？私は二つの方法であなたをお勧めし

<md-sidenav #sidenav align="end"> 
    <br/> 
    <span style="margin: 17px">{{auth?.userProfile?.name}}</span> <br /> 
    <button md-button routerLink="/spells"> All Spells </button> <br /> 
    <button md-button (click)="login()" *ngIf="!auth.authenticated()">Log In</button> 
    <button md-button routerLink="/spellbook" *ngIf="auth.authenticated()"> My Spellbooks </button> <br /> 
    <button md-button (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</button> 
</md-sidenav> 

Answer 1

：ここ

はsidenavは次のようになります。

1.ボタンのクリックイベントを処理し、コンポーネント内にロジックを配置します。

<button md-button (click)="routeToSpells()"> All Spells </button> <br /> 
<button md-button (click)="login()" *ngIf="!auth.authenticated()">Log In</button> 
<button md-button (click)="reouteToSpellBook()" *ngIf="auth.authenticated()"> My Spellbooks </button> <br /> 
<button md-button (click)="logout()" *ngIf="auth.authenticated()">Log Out</button> 



routeToSpells(){ 
    this.sidenav.close(); 
    this.router.navigat('...') 
} 

login(){ 
    this.sidenav.close(); 
    ..... 
} 
reouteToSpellBook(){ 
    this.sidenav.close(); 
    this.router.navigat('...') 
} 

logout(){ 
    this.sidenav.close(); 
    this.auth.logout 
} 

また、あなたがUIを視覚化することができ、子コンポーネントにOnDestroy（）を実装し、何らかの原因