góc 2 vật liệu: sidenav chuyển từ thành phần

Question

Tôi đang sử dụng góc 2 Chất liệu sidenav trong dự án của tôi theo cách này:

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

Làm thế nào để gọi start.toggle() từ thành phần của tôi thay vì phần tử với sự kiện click?

Cảm ơn bạn đã đọc

Answer 1

Bạn muốn khai báo một ViewChild trong điều khiển của bạn tham chiếu đến các MdSidenav bên trong thành phần của bạn, như thế này:

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

nơi start là tên của các thành phần bạn muốn tham chiếu, trong trường hợp này là sidenav.

Tiếp theo, bạn có thể gọi các phương thức trên sidenav đó, như this.sidenav.toggle() bên trong các chức năng của bộ điều khiển.

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

Answer 2

Chuyển đối tượng đến chức năng của bạn.

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

Và trong ts của bạn:

export class AppComponent { 

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