如何在 Angular 8 和 Angular 材料中单击 sidenav 中的菜单时在侧栏旁边显示我的组件

Posted 2023-02-18

【中文标题】如何在 Angular 8 和 Angular 材料中单击 sidenav 中的菜单时在侧栏旁边显示我的组件

【英文标题】：How to display my component next to side bar on click of menu from sidenav in angular 8 and angular material

【发布时间】：2020-04-13 16:53:46

【问题描述】：

我正在研究 Angular 8 和 Angular 材料，但我被困在我想在 sidenav 旁边显示我的内容或（组件）的地方，即单击侧边菜单中的任何链接时主屏幕。这里是我的代码

stackblitz 的链接My_link

除了 App 组件，我还有 3 个组件

标题组件 侧边栏组件 链接内容组件

SidebarCompoment.html

<div style="height: 100vh;">
<mat-sidenav-container>
    <mat-sidenav #sidenav>
    <!--   # [(opened)]="opened" mode="side" (opened)="log('Opened')" 
      (closed)="log('Closed')" --> 
    <div class="dropdown">  
    <button  [matMenuTriggerFor]="animals"  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Animal index</button>
 </div>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates" (click)="setflag()"><a [routerLink]="'/link1'">Vertebrates</a></button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>
   </mat-sidenav>  
  <mat-sidenav-content>
      <button  class="fa fa-list fa-2x" (click)="sidenav.toggle()"></button>
 </mat-sidenav-content>
 </mat-sidenav-container>
</div>

SidebarComponent.css

mat-sidenav-container 
height: 100vh;
background-color: white;

  

  mat-sidenav, mat-sidenav-content 
    padding: 16px;

  

  mat-sidenav 
    background-color: black;
    width: 300px;
  

app-routing.module.ts

const routes: Routes = [

   path: '', component: AppComponent,
   path: 'link1', component: LinkContentComponent,
   path: 'link2', component: LinkContentComponent

];

app.component.html

<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>

我还提供了 stackblitz 的链接 Stackblitz-link

所以这里我的问题是，当我单击侧菜单中的任何链接时，我想在主屏幕中加载 LinkContent 组件，非常靠近侧菜单和标题下方。所以我应该怎么做。现在当我点击链接组件加载在侧边栏组件下方，如图所示。任何帮助将不胜感激

【问题讨论】：

只是一个建议：如果你在stackblitz.com 中创建一个例子，它会更容易帮助你（而且肯定更准确）。

我添加了stackBlitz的链接

【参考方案1】：

查看您的代码，我认为您需要重新访问文档。 https://material.angular.io/components/sidenav/overview

【讨论】：

如果你能帮助我，那就太好了，因为我是初学者

【参考方案2】：

当我去找你时，stackblitz 的链接我可以看到你在 app.component.html 中有你的路由器插座。所以你可以做的是像这样在 sidebar.component.html 中添加你的路由器插座

Sidebar.component.html

<div style="height: 100vh;">
<mat-sidenav-container>
    <mat-sidenav #sidenav>
    <!--   # [(opened)]="opened" mode="side" (opened)="log('Opened')" 
      (closed)="log('Closed')" --> 
    <div class="dropdown">  
    <button  [matMenuTriggerFor]="animals"  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Animal index</button>
 </div>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates" (click)="setflag()"><a [routerLink]="'/link1'">Vertebrates</a></button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>
   </mat-sidenav>  
  <mat-sidenav-content>

<!-- Adding router-outtlet here        -->

<router-outlet></router-outlet>

      <button  class="fa fa-list fa-2x" (click)="sidenav.toggle()"></button>
 </mat-sidenav-content>
 </mat-sidenav-container>
</div>