Angular2 HTML指令中＃的含义是什么

Question

我试图触发sidenav（打开和关闭）的状态。我有这样的：

<div class="viewport"> 
    <md-toolbar color="primary"> 
    <button *ngIf="!isNavbarOpen" md-icon-button (click)="sidenav.open()"><md-icon>menu</md-icon></button> 
    <button *ngIf="isNavbarOpen" md-icon-button (click)="sidenav.close()"><md-icon>close</md-icon></button> 
    <span class="toolbar-title">Title</span> 
    </md-toolbar> 
    <md-sidenav-layout> 
    <md-sidenav align="start" mode="over" #sidenav> 
     Sidenav 
    </md-sidenav> 
    </md-sidenav-layout> 
</div> 

我如何使用#sidenav从我的打字稿文件改变isNavbarOpen场每当sidenav状态变化？

或

我该如何重写sidenav.open（）方法？

Answer 1

这是一个更好的方法，因此您可以使用所有属性并订阅所有事件。不要将它传递给open（）/ close（）函数。

import { Component, ViewChild, OnInit } from '@angular/core'; 
import { MdSidenav } from '@angular/material'; 

@Component({ 
.... 
}) 
export class AppComponent implements OnInit { 
    public isNavbarOpen: boolean; 

    // This gets a reference to the #sidenav 
    @ViewChild('sidenav') sidenav: MdSidenav; 

    ngOnInit() { 
     // Subscribe to the onCloseStart event 
     this.sidenav.onCloseStart.subscribe(() => { 
      this.isNavbarOpen = true; 
     }); 
    } 

    open() { 
     this.sideNav.open(); 
    } 
}