从角度 8 的导航栏中选择一个选项后，如何使侧面导航保持不变并且内容单独消失？

Posted 2023-02-22

技术标签:

【中文标题】从角度 8 的导航栏中选择一个选项后，如何使侧面导航保持不变并且内容单独消失？【英文标题】：How to make side navigation stay and content alone disappear after selecting an option from navigation bar in angular 8? 【发布时间】：2021-09-13 16:01:58 【问题描述】：

我有一个没有导航栏的主页。登录后，我有一个固定的侧面导航栏。当我从侧面导航栏中选择某个选项时，我希望导航栏保留但内容消失并显示所选组件的内容。我试过使用 *ngIf 但导航栏也随着内容消失。由于我是 Angular 新手，我们将不胜感激。

admin.html:

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
          <mat-icon>library_books</mat-icon>
          <span>Books</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu="matMenu" class="my-menu">
              <button mat-menu-item class="list">
                  <mat-icon>library_books</mat-icon>
                <span>Book List</span>
              </button>
              <button mat-menu-item class="list" routerLink="/addBook" (click)="showPage()"> 
              <mat-icon>add_circle</mat-icon>
                <span>Add Book</span>
              </button>
              <button mat-menu-item class="list" routerLink="/editBook" (click)="showPage()">
                  <mat-icon>edit</mat-icon>
                <span>Edit Book</span>
              </button>
              <button mat-menu-item class="list">
                  <mat-icon>delete</mat-icon>
                  <span>Delete Book</span>
                </button>
            </mat-menu>
      </button>
      <mat-divider></mat-divider>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Transaction icon-button with a menu">
          <mat-icon> import_export</mat-icon>
          <span>Transactions</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu1="matMenu" class="my-menu1">
              <button mat-menu-item class="list1">
                  <mat-icon>history</mat-icon>
                <span>Transaction History</span>
              </button>
              <button mat-menu-item class="list1" routerLink="/lendBook" (click)="showPage()"> 
                  <mat-icon>book</mat-icon>
                <span>Lend a Book</span>
              </button>
              <button mat-menu-item class="list1">
                <mat-icon>edit</mat-icon>
                <span>Edit Transaction</span>
              </button>
              <button mat-menu-item class="list1">
                  <mat-icon>delete</mat-icon>
                <span>Delete Transaction</span>
              </button>
            </mat-menu>
      </button>
      <mat-divider></mat-divider>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
          <mat-icon>perm_identity</mat-icon>
          <span>Members</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu2="matMenu" class="my-menu2">
              <button mat-menu-item class="list2">
                  <mat-icon>list</mat-icon>
                <span>Members List</span>
              </button>
              <button mat-menu-item class="list2" routerLink="/addMember" (click)="showPage()"> 
                  <mat-icon>group_add</mat-icon>
                <span>Add a Member</span>
              </button>
              <button mat-menu-item class="list2">
                <mat-icon>edit</mat-icon>
                <span>Edit Member</span>
              </button>
            </mat-menu>
      </button>
      <mat-divider></mat-divider>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu3" aria-label="Example icon-button with a menu">
          <mat-icon>error</mat-icon>
          <span>Fines</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu3="matMenu" class="my-menu3">
              <button mat-menu-item class="list3">
                  <mat-icon>list</mat-icon>
                <span>Fine List</span>
              </button>
              <button mat-menu-item class="list3" routerLink="/addFine" (click)="showPage()"> 
                  <mat-icon>add_circle</mat-icon>
                <span>Add Fine</span>
              </button>
              <button mat-menu-item class="list3">
                <mat-icon>edit</mat-icon>
                <span>Edit Fine</span>
              </button>
            </mat-menu>
      </button>

      <mat-divider></mat-divider>

      <button mat-button class="menu-button">
          <mat-icon>phone</mat-icon>
          <span>Contact us</span>
      </button>


  </mat-sidenav>
  <mat-sidenav-content *ngIf="show">
      <div class="quote">
          <p>
              " The library is inhabited by spirits that come out of the pages at night "
          </p>
          <p>
              -K
          </p>
      </div>

  </mat-sidenav-content>
</mat-sidenav-container>

admin.component.ts：

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
)
export class AdminComponent implements OnInit 

 constructor()  

  show: boolean = true;

  ngOnInit(): void 
  

  showPage() 
    this.show = false;

【问题讨论】：

【参考方案1】：

最好的方法是利用 Angular 路由并使用 <router-outlet></router-outlet> 指令在发生路由时渲染任何相应的组件。这就是单页应用程序的工作方式。

通读这个角度指南以更详细地理解这个概念。

https://angular.io/guide/router-tutorial#using-angular-routes-in-a-single-page-application

一旦您阅读并理解了路由器，就可以将您的“页面”分解为单独的组件。 AddFineComponent、LendBookComponent 等并将它们路由到子路由器出口

  <mat-sidenav-content>
      <router-outlet name="sub"></router-outlet>
  </mat-sidenav-content>

.routing.ts

routes: Routes = [
  path:'', redirectTo: 'login', pathMatch: 'full',
  
    path: 'login',
    component: LoginComponent,

  ,
   path: 'admin',
    component: AdminComponent,
      children: [
        path: 'lendBook',component: LendBookComponent, outlet:"sub" ,
        path: 'addFine',component: AddFineComponent, outlet:"sub"
      ]
   
];

并更新您的 routerLinks

routerLink="admin/addFine"

【讨论】：

感谢您的回复，但我没有单独的导航栏作为组件。导航栏加上页面中的内容组成了管理组件。当我从导航栏中选择某些内容时，我希望导航栏保持不变，但内容会消失并加载相应的页面。由于导航栏和内容在同一页面中，我看到使用 *ngIf 是一个选项，但我不知道我是否以错误的方式实现它。您的侧边栏消失的原因与showPage() 或*ngIf 无关，而是您的应用程序正在路由到/lendBook 或/addFine 等...因为routerLink 指令您已附加到每个菜单项。您正在混合“路由”和“DOM 操作”。你会想要选择其中一个。非常感谢您的耐心等待。那么我现在应该为导航栏创建一个单独的组件吗？在不了解您的路由结构的情况下，我无法详细回答这个问题。假设您当前有 2 条路由 /login 和 /admin。我会将其余的路由嵌套为 /admin 的子级。例如：/admin/lendBook、/admin/addFine 等。然后在内容区域<router-outlet name="sub"></router-outlet> 中添加一个命名的出口，并在子路由上定义出口。类似于此处提供的答案***.com/questions/41857876/…。我已经更新了我的答案以反映这个想法。

以上是关于从角度 8 的导航栏中选择一个选项后，如何使侧面导航保持不变并且内容单独消失？的主要内容，如果未能解决你的问题，请参考以下文章

重新加载页面后如何突出显示导航栏中的活动菜单项