javascript - 如何在组件内使用 Angular 2 Material Sidenav？

Question

我是 Angular 新手，我正在尝试了解这里的原理。新的 Angular 2 Material 的文档有点令人困惑，但我设法向我的应用程序添加选项卡和 sidenav，但我无法创建一个按钮来使用我的组件打开 sidenav。这个例子是我对它是如何完成的唯一引用，并且对此了解不多，我认为它使用的是 Angular 1？ https://material.angularjs.org/latest/demo/sidenav

我的组件中现在的内容是:

import { Component, OnInit, OnDestroy, ElementRef, Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {Http, Response} from '@angular/http';

import { MD_TABS_DIRECTIVES } from '@angular2-material/tabs';
import { MD_SIDENAV_DIRECTIVES } from '@angular2-material/sidenav';

@Component({
selector: 'my-ambient-detail',
templateUrl: 'app/ambients/ambient-detail.component.html',
directives: [MD_TABS_DIRECTIVES, MD_SIDENAV_DIRECTIVES],
})
export class AmbientDetailComponent implements OnInit, OnDestroy {


// constructor and other functions here

openRightMenu(){
   //WHAT GOES HERE?
}

}

在 html 中:

<md-sidenav-layout>

<!-- Content -->
<md-content>

    <md-button (click)="openRightMenu()">
    Open Right Menu
    </md-button>

</md-content>

<!-- Sidebar -->
<md-sidenav md-component-id="right" class="md-sidenav-right">

Sidebar content
</md-sidenav>
</md-sidenav-layout>

所以我找不到关于如何使用组件中的功能通过按钮打开/关闭侧导航的明确引用。也许我做错了，我直接从 Angular 网站中的英雄教程开始构建了我的应用程序，但从我对此主题的搜索中，我对 Angular 1 和 2 感到非常困惑。

Answer 1

您需要通过 id (#sidenav) 获取对元素的 ViewChild 引用，并将其输入到 MdSidenav 组件中。请注意，ViewChild 引用在构造函数中尚不可用，只能在 init 之后使用。

import { Component, ViewChild, OnInit } from '@angular/core';
import { MdSidenav } from '@angular/material';

@Component({
    ...,
    template: `
        <md-sidenav-container>
            <md-sidenav #sidenav mode="side" opened="false"></md-sidenav>
        </md-sidenav-container>
       `
})

export class MyComponent implements OnInit {
    @ViewChild('sidenav') sidenav: MdSidenav;

    constructor() {}

    ngOnInit() {
        this.sidenav.onOpen.subscribe(() => {
            console.log("Sidenav opened");
        });

        setTimeout(this.openSidenav.bind(this), 5000);
    }

    openSidenav() {
        this.sidenav.open();
    }
 }