В чем смысл # внутри директивы HTML Angular2

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().

<div class="viewport"> 
     <md-toolbar color="primary"> 
     <button *ngIf="!isNavbarOpen" md-icon-button (click)="open()"><md-icon>menu</md-icon></button> 
     <button *ngIf="isNavbarOpen" md-icon-button (click)="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> 

Вместо ссылки его с помощью "ViewChild" и MdSidenav:

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