如何在組件內使用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？

回答

相關問題