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

我的组件结构是

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>

<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.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>

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

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

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

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

    return this.sidenav.toggle(isOpen);
}

当我点击“销售”菜单时，侧导航会完美切换。但是，当我单击“税务报告”菜单时，侧导航不会切换。它只是在内容区域显示一个空白页。我找不到在运行时传递给服务的边栏。我在NIT上调用销售和税务报告中的setSidenav。因此，所发生的是，传递的最后一个侧栏被设置为sidenav，并且只有该侧栏可以切换。我不明白我犯了什么错误。我甚至尝试创建两个单独的函数，如setSideNav1和toggle1，但仍然存在相同的问题

编辑：@Llorenc Pujol Ferriol:我对你的代码做了一些更改。这就是我所做的，它工作得非常完美

但问题是集装箱占据了大部分宽度，我无法设置matside导航集装箱的宽度。当我设置它时，它的行为很奇怪。这是它的屏幕截图

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

我在这里看到两个问题。第一个问题是，显示组件的条件彼此并不不同，当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完成的，也可以通过动态组件创建来完成。诸如此类：

这将使组件之间的通信更加困难，因为它是分离的，但最终的结果要好得多，它也有助于分离应用程序

---

希望这有帮助。

您能展示一下您的税务部分吗？它也有侧导航？是的，它也有侧导航，就像销售组件一样。当我点击税务报告时，税务报告的子菜单将显示为侧导航。它工作得很好，我对它做了一些修改。用屏幕截图更新了我的评论。我在设置宽度时遇到了一个问题。您好@user7906966，我看到了您的解决方案，但正如我所说的，我建议您只使用一个sidenav容器和一个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>