如何打开＆amp;使用Angular 2中的材质组件单击切换按钮时关闭sidenav

Question

我是Angular 2的新手。如何在Angular2中使用mat组件打开sidenav。 我正在使用此网站但无法解决问题。我有两个不同的组件Header，Sidebar。切换按钮位于Header组件中，sidenav是不同的组件。我尝试过使用事件发射器以及服务，但无法解决问题。enter image description here

https://material.angular.io/components/categories`

Answer 1

我面临同样的问题..我想出了以下解决方案。

所以我有一个单独的Navbar（nav-bar.component.ts）组件和一个单独的SideBar（sidebar.component.ts）。

你在正确的道路上，除了我认为@HostBinding('class.open')不是侧导航的有效类。我提出了以下解决方案。

sidenav.component.ts

export class SideNavComponent implements OnDestroy{
isOpen: boolean;
    ngOnInit(){

        this._sideNavService.change.subscribe(isOpen =>{
            console.log(isOpen)
            this.isOpen = isOpen;
        })
    }
}

以下是我的侧面导航的HTML。 注意：我们可以使用属性绑定并绑定到＆＃34;打开＆＃34; sidenav的财产。我正在使用变量isOpen来做到这一点。

sidenav.component.html

<mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #sidenav [(opened)]="isOpen" [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
        <mat-nav-list>
            <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
        </mat-nav-list>
    </mat-sidenav>
        <div>Some Text<div>

    </mat-sidenav-container>

需要注意的另一件事是我在div中放置了一个文本，因为显然这会隐式创建一个<mat-sidenav-content>标签，如果没有这个标签，则侧面导航将不可见 我为Navbar编写了一个基本指令。

nav-bar.directive.ts

import { Component, HostListener, Directive, HostBinding, Input } from '@angular/core';
import { SideNavService } from "../_services/sideNav.service"; 

@Directive({ selector: '[sidebarButton]' })
export class HostDirective {
    constructor(private sideNavService:SideNavService){}

    @HostListener('click') onClick() {
        console.log("Called")
        this.sideNavService.toggle();
    }

}

用于两个组件通信的sideNav服务。

sideNav.service.ts

import { Injectable, Output, EventEmitter} from "@angular/core";
@Injectable()
export class SideNavService{
    isOpen = false;

    @Output() change: EventEmitter <boolean> = new EventEmitter();

    toggle(){
        console.log("event fired")
        this.isOpen = !this.isOpen;
        this.change.emit(this.isOpen);
    }
}

上述解决方案只是解决了问题所提到的问题，但不是一个优雅的解决方案