कोणीय 2 सामग्री: sidenav घटक

Question

से टॉगल मैं कोणीय 2 सामग्री sidenav अपने प्रोजेक्ट में उपयोग कर रहा हूँ इस तरह से:

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

कैसे मेरी घटक के बजाय क्लिक करें घटना के साथ तत्व से start.toggle() कॉल करने के लिए?

Answer 1

पढ़ने के लिए धन्यवाद आप इस तरह अपने नियंत्रक में एक ViewChild संदर्भ MdSidenav अपने घटक के अंदर घोषित करने के लिए, चाहते हैं:

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

जहां start घटक का नाम आप करना चाहते हैं संदर्भ, इस मामले में sidenav।

अगला आप अपने नियंत्रक के कार्यों के अंदर this.sidenav.toggle() जैसे उस sidenav पर विधियों को कॉल कर सकते हैं।

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

Answer 2

अपने कार्य करने के लिए वस्तु को पारित करना।

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

और अपने ts में:

export class AppComponent { 

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