在角度 4 中切换多个侧面导航答案

【问题标题】：Toggle multiple side navs in angular 4在角度 4 中切换多个侧面导航
【发布时间】：2018-04-18 11:10:02
【问题描述】：

我的组件结构是

app
  --app.component.html
  --app.component.ts
  -dashboard
    --dashboard.component.html
    --dashboard.component.ts
  -sales
    --sales.component.html
    --sales.component.ts
  -taxreports
    --taxreports.component.html
    --taxreports.component.ts
  -services
    --commonservices.ts

我的屏幕设计

这是我的 app.component.html 代码

<div class="BodyStyle">
    <div class="container FirstRowContainer" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="0px">
        <div class="container FirstColumnContainer" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="0px">
            <div class="item" fxFlex="16%">
                <img class="LogoStyle" src="/src/app/Shared/Images/test.png" height="55" />
            </div>
        </div>

        <div class="container SecondColumnContainer" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="0px">
            <div class="container SecondRowContainer" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="0px">
                <div class="container" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="0px">
                    <div class="LogoHeading" fxFlex="100%">
                        <h2 class="restaurantname">Name</h2>
                    </div>
                </div>
                <div class="container" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="0px">
                    <mat-toolbar class="UserToolBarStyle">
                        <i class="material-icons UserIconStyle">
                            person
                            <button mat-button class="UserButtonStyle">
                                <h4 class="UserNameStyle">Admin</h4>
                            </button>
                        </i>
                    </mat-toolbar>
                </div>
            </div>

            <div class="container ThirdRowContainer" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="0px">
                <div class="container ThirdColumnContainer" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="0px">

                    <div class="item" fxFlex="100%">
                        <mat-toolbar class="ToolBarStyle">
                            <button mat-button class="ButtonMenu" (click)="btnClick('dashboard');">Dashboard</button>
                            <button mat-button class="ButtonMenu" (click)="toggleSidenav('sales')">Sales</button>
                            <button mat-button class="ButtonMenu" (click)="toggleSidenav('taxreports')">Tax Reports</button>
                            <button mat-button class="ButtonMenu">MIS</button>
                            <button mat-button class="ButtonMenu">Others</button>
                        </mat-toolbar>
                    </div>
                </div>

                <div class="container FourthColumnContainer" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="0px">
                    <div class="item">
                        <mat-toolbar class="ToolBarStyle">
                            <i class="glyphicon glyphicon-log-out UserIconStyle1">
                                <button mat-button class="UserButtonStyle1">
                                    <h4 class="UserNameStyle1">Logout</h4>
                                </button>
                            </i>
                        </mat-toolbar>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="placeholder" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="0px" style="margin-top:50px;margin-left:20px;margin-right:20px;">
         <div [hidden]="salesDiv"class="item" fxFlex="100%">               
            <app-tax-reports>
                <router-outlet></router-outlet>
            </app-tax-reports>
             <app-sales>
                 <router-outlet></router-outlet>
             </app-sales> 
        </div>
        <div [hidden]="salesDiv" class="item" fxFlex="100%">
            <app-sales>
                <router-outlet></router-outlet>
            </app-sales>                           
        </div>

    </div>

    <div class="container FooterContainer" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="0px">
        <div class="item item-4 FooterItem" fxFlex="100%" fxFlexOrder="2">
            <footer>
                <p class="footer_align">
                    <span class="FooterText">Powered By</span>
                    <img class="FooterImage" src="/src/app/Shared/Images/EasyResto.png" />
                </p>
            </footer>
        </div>
    </div>
</div>

这是我的 app.component.ts

import { Component, Input } from '@angular/core';
import { HttpservService } from './services/commonservice.service';
import { MatSidenav } from '@angular/material';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',    
    providers: [HttpservService]
})
export class AppComponent {
    salesDiv: boolean;
    taxDiv: boolean;


    constructor(private sidenavService: HttpservService) {
        this.salesDiv = true;
        this.taxDiv = true;
    }

    toggleSidenav(div: string) {

        if (div == 'sales') {
            alert("sales");
            this.salesDiv = false;
            this.taxDiv = true;
            this.sidenavService.toggle();
        }
        else if (div == 'taxreports') {
            alert("taxreports");
            this.salesDiv = true;
            this.taxDiv = false;
            this.sidenavService.toggle();
        }

    }
}

这是我的销售组件.html

<mat-sidenav-container>
    <mat-sidenav #sidenav mode="side" class="mat-elevation-z4">
        Sidenav
    </matmd-sidenav>
  <main>
      <ng-content></ng-content>
  </main>
</mat-sidenav-container>

这是我的 sales.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpservService } from '../services/commonservice.service';
import { MatSidenav } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-sales',
    templateUrl: './sales.component.html'
})
export class SalesComponent implements OnInit {   


    @ViewChild('sidenav') public sidenav: MatSidenav;

    constructor(private httpservice: HttpservService, private router: Router) {       
    }

    ngOnInit() {
        console.log(this.sidenav);
        this.httpservice.setSidenav(this.sidenav);
    }

}

在 commonservice.ts 中，我像这样调用了 toggle 和 sidesetnav

 public setSidenav(sidenav: MatSidenav) {
    this.sidenav = sidenav;
}

 public toggle(isOpen?: boolean): Promise<MatDrawerToggleResult> {

    return this.sidenav.toggle(isOpen);
}

当我点击销售菜单时，侧面导航完美切换。但是当我点击税务报告菜单时，侧面导航不会切换。它只是在内容区域中显示一个空白页面。我找不到在运行时传递给服务的侧栏。我在销售和税务报告中调用 setSidenav() oninit()。所以发生的事情是，传递的最后一个侧栏被设置为sidenav，并且只有那个切换。我不明白我在做什么错误。我什至尝试创建 2 个单独的函数作为 setSideNav1() 和 toggle1() 但仍然是同样的问题。

编辑：@Llorenc Pujol Ferriol：我对您的代码做了一些更改。这就是我所做的，而且效果很好。

   <div class="placeholder" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="0px" style="margin-top:50px;margin-left:20px;margin-right:20px;">
    <div fxFlex="100%">
        <router-outlet></router-outlet>
    </div>
    <mat-sidenav-container>
        <mat-sidenav #sidenav align="end" mode="side" class="mat-elevation-z4 side-nav-overflow-hidden">
            <app-sales *ngIf="salesDiv">
            </app-sales>
        </mat-sidenav>
    </mat-sidenav-container>

    <mat-sidenav-container>
        <mat-sidenav #taxnav mode="side" align="end" class="mat-elevation-z4">
            <app-tax-reports *ngIf="taxDiv">
            </app-tax-reports>
        </mat-sidenav>
    </mat-sidenav-container>
</div>

但问题是容器占据了宽度的主要部分，我无法为 matside-nav-container 设置宽度。当我设置它的行为很奇怪。这是它的屏幕截图。

Dashboard and side bar

更新：我通过添加 [ngStyle]="{ 'width.vw': setSalesWidth }" 解决了宽度问题

【问题讨论】：

您能出示您的税务成分吗？它也有一个sidenav？
是的，它也只有像销售组件一样的侧导航。当我点击税务报告时，税务报告的子菜单将显示为侧导航

标签： angular angular2-routing angular2-template angular4-router

【解决方案1】：

我在这里看到两个问题。第一个问题是显示你的组件的条件并没有不同，当 salesDiv 为 true 时两者都被隐藏：

    <div [hidden]="salesDiv"class="item" fxFlex="100%">               
        <app-tax-reports>
            <router-outlet></router-outlet>
        </app-tax-reports>
         <app-sales>
             <router-outlet></router-outlet>
         </app-sales> 
    </div>
    <div [hidden]="salesDiv" class="item" fxFlex="100%">
        <app-sales>
            <router-outlet></router-outlet>
        </app-sales>                           
    </div>

第二个也是最重要的一点是，您在此处完成的组件架构不是预期的。 Material2 sidenav 组件不希望被销毁和重新初始化，它有相关的动画和当前状态，不是一个好习惯，虽然没有理由销毁它，只是替换它的内容：

<mat-sidenav-container>
    <mat-sidenav #sidenav mode="side" class="mat-elevation-z4">
       <app-sales-sidenav *ngIf="salesDiv"></app-sales-sidenav>
       <app-taxes-sidenav *ngIf="taxDiv"></app-taxes-sidenav>
    </mat-sidenav>
    <app-sales *ngIf="salesDiv"></app-sales>
    <app-taxes *ngIf="taxDiv"></app-taxes>
</mat-sidenav-container>

这个实现是用 *ngIf 完成的，它也可以是一个动态的组件创建。类似的东西：Creating a angular2 component with ng-content dynamically

这会使组件之间的通信变得更加困难，因为它是分开的，但最终的结果要好得多，它还可以解耦你的应用程序。

希望这会有所帮助。

【讨论】：

非常感谢。它工作得很好，我对其进行了一些修改。用屏幕截图更新了我的评论。我在设置宽度时遇到问题。
嗨@user7906966，我看到了你的解决方案，但正如我所说，我建议你只使用一个sidenav-container和一个sidenav，并且只更改我在回答中所说的内容。虽然，如果这有助于您解决问题，请将此答案作为解决方案。