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

我是新来角，我试图了解这里的绳索。新的角度2材料的文档有点混乱，但我设法添加选项卡和sidenav到我的应用程序，但我无法使用我的组件打开sidenav按钮。这个例子是唯一的参考，我已经知道它是如何完成的，而不是很了解它我认为它使用角1？ https://material.angularjs.org/latest/demo/sidenav 如何在组件内使用Angular 2 Material 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>

所以我不能找到如何打开/关闭一个明确的参考带按钮的sidenav使用组件中的功能。也许我做的这一切都是错误的，我建立了我的应用程序，直接从角色网站中的英雄教程开始，但是我对这个主题的搜索在角度1和角度2之间感到非常困惑。

来源

2016-07-29 Elaine Marley

显然这确实是角1，我终于发现了这一点：https://justindujardin.github.io/ng2-material/#/components/sidenav，这似乎是采用了棱角分明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>

来源

2016-07-29 08:35:31

你需要抢通过id（#sidenav）对元素进行ViewChild引用，并将其键入MdSidenav组件。请注意，ViewChild引用在构造函数中不可用，但仅在初始化后才可用。

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(); 
    } 
}

来源

2017-02-04 12:22:04

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

回答

相关问题