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

我是个新手，我正在努力理解这里的诀窍。新angular 2材质的文档有点混乱，但我设法将选项卡和sidenav添加到我的应用程序中，但我无法使用我的组件制作一个按钮来打开sidenav。这个例子是我唯一的参考资料，我不知道它是如何做的，我想它使用的是angular 1

我现在在我的组件中有以下内容：

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>

打开右菜单
边栏内容

---

因此，对于如何使用组件中的函数通过按钮打开/关闭sidenav，我找不到明确的参考。也许我做错了，我直接从angular网站上的英雄教程开始构建我的应用程序，但是我很困惑angular 1和angular 2，因为我在这个主题上的搜索。

显然这确实是angular 1，我最终发现：这似乎是在使用angular 2，我甚至不需要在我的组件中有一个函数：

<md-sidenav-layout>

  <!-- Content -->
  <md-content>
    <md-button (click)="right.open()">
      Open Right Menu
    </md-button>
  </md-content>

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

</md-sidenav-layout>

打开右菜单
边栏内容

显然，这确实是angular 1，我最终发现：它似乎使用angular 2，我甚至不需要在我的组件中有一个函数：

<md-sidenav-layout>

  <!-- Content -->
  <md-content>
    <md-button (click)="right.open()">
      Open Right Menu
    </md-button>
  </md-content>

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

</md-sidenav-layout>

打开右菜单
边栏内容

您需要通过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();
    }
 }

从'@angular/core'导入{Component，ViewChild，OnInit}；
从“@angular/material”导入{MdSidenav}；
@组成部分({
...,
模板：`
`
})
导出类MyComponent实现OnInit{
@ViewChild（'sidenav'）sidenav:MdSidenav；
构造函数（）{}
恩戈尼尼特（）{
this.sidenav.onOpen.subscribe（（）=>{
控制台日志（“侧导航打开”）；
});
setTimeout（this.openSidenav.bind（this），5000）；
}
openSidenav（）{
this.sidenav.open（）；
}
}

您需要通过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();
    }
 }

从'@angular/core'导入{Component，ViewChild，OnInit}；
从“@angular/material”导入{MdSidenav}；
@组成部分({
...,
模板：`
`
})
导出类MyComponent实现OnInit{
@ViewChild（'sidenav'）sidenav:MdSidenav；
构造函数（）{}
恩戈尼尼特（）{
this.sidenav.onOpen.subscribe（（）=>{
控制台日志（“侧导航打开”）；
});
setTimeout（this.openSidenav.bind（this），5000）；
}
openSidenav（）{
this.sidenav.open（）；
}
}