kątowy Materiał 2: sidenav przełączać się z komponentu

Question

Używam kątowa 2 Materiał sidenav w moim projekcie w ten sposób:

<md-sidenav-layout> 
    <md-sidenav #start mode="side" [opened]="true"> 
     <md-nav-list> 
     </md-nav-list> 
    </md-sidenav> 

    <button md-button (click)="start.toggle()">Close</button> 

    <router-outlet></router-outlet> 

</md-sidenav-layout> 

jak zadzwonić start.toggle() z mojego elementu zamiast elementu z click wydarzenia?

Dziękuję za przeczytanie

Answer 1

Chcesz zadeklarować ViewChild w kontrolerze, który odwołuje się MdSidenav wewnątrz komponentu, tak:

// Sidemenu 
@ViewChild('start') sidenav: MdSidenav; 

gdzie start to nazwa składnika chcesz odniesienie, w tym przypadku sidenav.

Następnie można wywoływać metody z tego sidenav, takie jak this.sidenav.toggle() wewnątrz funkcji kontrolera.

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

Answer 2

przekazać obiekt do swojej funkcji.

<md-sidenav-layout> 
    <md-sidenav #start mode="side" [opened]="true"> 
     <md-nav-list> 
     </md-nav-list> 
    </md-sidenav> 

    <button md-button (click)="randomName(start)">Close</button> 

    <router-outlet></router-outlet> 

</md-sidenav-layout> 

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    constructor() { 
    } 

    randomName(start: any) { 
     start.toggle(); 
    } 
} 

Answer 3

<md-sidenav #sidenav class="example-sidenav" opened="false"> 
    <div class="example-sidenav-content"> 
     <button type="button" md-button (click)="toogleNav(sidenav)"> 
     toogle 
     </button> 
    </div> 
</md-sidenav> 

iw swoim TS:

export class AppComponent { 

    toogleNav(nav: any) { 
    if (nav.opened) { 
     nav.close() 
    } else { 
     nav.open(); 
    } 
    } 
}