Я новичок в угловой, и я пытаюсь понять веревки здесь. Документы нового углового материала 2 немного запутывают, но мне удалось добавить вкладки и сидены в мое приложение, но я не могу сделать кнопку, чтобы открыть sidenav, используя мой компонент. Этот пример является единственной ссылкой, которую я имею для того, как это делается, и не зная об этом. Я думаю, что это использование углового 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>
Поэтому я не могу найти четкую ссылку на то, как открыть/закрыть sidenav кнопкой, используя функции в компоненте. Возможно, я делаю все это неправильно, я создал свое приложение, начиная прямо с учебника героев на угловом веб-сайте, но я очень смущен между угловыми 1 и 2 из моих поисков по этой теме.
По-видимому, это действительно было угловатым 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>
Вам нужно получить ссылку ViewChild на элемент по id (#sidenav) и набрать ее в компоненте 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();
}
}