Angular2 通过组件代码控制 Material

Question

我想在 test() 方法被调用时启动 start.toggle() 函数(属于 Angular 2 material md-sidenav-layout 组件)。如何在 app.component.ts 中调用 md-sidenav-layout start.toggle()？

app.component.html

<md-sidenav-layout class="sidenav" fullscreen>
    <md-sidenav #start>
        Start Side Drawer
        <br>
        <md-nav-list>
            <a md-list-item [routerLink]="['']">Home</a>
            <a md-list-item [routerLink]="['about']">About</a>
        </md-nav-list>
        <button md-button (click)="start.close()">Close</button>
    </md-sidenav>

    <div class="content">
        <button md-button (click)="start.toggle()">Toggle Start Side Drawer</button>

        <button md-button (click)="test()">Test Button</button>
        <main>
            <router-outlet></router-outlet>
        </main>
        <footer>
        </footer>
    </div>
</md-sidenav-layout>

app.component.ts

import {Component} from '@angular/core';
// what to import here?

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

    test() {
        // how to call md-sidenav-layout start.toggle() properly here?
        start.toggle();
    }
}

Answer 1

将对象传递给您的函数，以便您可以使用它。

<button md-button (click)="test(start)">Test Button</button>

在你的组件中

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