Angular Material导航栏无法展开菜单。

huangapple
go评论96阅读模式
英文:

angular material nav bar not opening the menus

问题

I am working on an angular project in which after login I need to show the menu to the user, which should be collapsible. Here is my code for the material navbar, but it's not opening the menus list when I click on it.

  1. <mat-toolbar color="primary">
  2.     <button mat-icon-button (click)="toggleCollapse()">
  3.         <mat-icon>menu</mat-icon>
  4.     </button>
  5.     <span class="app-title">Dashboard</span>
  6.     <div class="spacer"></div>
  7.     <button mat-raised-button color="warn" (click)="logout()">Logout</button>
  8. </mat-toolbar>
  10. <mat-sidenav-container>
  11.     <mat-sidenav [mode]="isCollapsed ? 'over' : 'side'" [opened]="!isCollapsed">
  12.         <mat-nav-list>
  13.             <a mat-list-item routerLink="/dashboard" routerLinkActive="active-link">
  14.                 <mat-icon>dashboard</mat-icon>
  15.                 <span>Dashboard</span>
  16.             </a>
  17.             <a mat-list-item routerLink="/details" routerLinkActive="active-link">
  18.                 <mat-icon>info</mat-icon>
  19.                 <span>Details</span>
  20.             </a>
  21.             <a mat-list-item routerLink="/users" routerLinkActive="active-link">
  22.                 <mat-icon>group</mat-icon>
  23.                 <span>Users</span>
  24.             </a>
  25.             <a mat-list-item routerLink="/change-password" routerLinkActive="active-link">
  26.                 <mat-icon>lock</mat-icon>
  27.                 <span>Change Password</span>
  28.             </a>
  29.         </mat-nav-list>
  30.     </mat-sidenav>
  32.     <mat-sidenav-content>
  33.         <ng-content></ng-content>
  34.     </mat-sidenav-content>
  35. </mat-sidenav-container>

And in the .ts file:

  1. import { Component } from '@angular/core';
  2. import { AuthService } from '../auth.service';
  3. import { Router } from '@angular/router';
  5. @Component({
  6.     selector: 'app-nav-bar',
  7.     templateUrl: './nav-bar.component.html',
  8.     styleUrls: ['./nav-bar.component.css']
  9. })
  10. export class NavBarComponent {
  11.     isCollapsed = true;
  13.     constructor(private authService: AuthService, private router: Router) { }
  15.     toggleCollapse(): void {
  16.         alert("Hi");
  17.         this.isCollapsed = !this.isCollapsed;
  18.     }
  20.     logout(): void {
  21.         localStorage.removeItem('token');
  22.         this.authService.logout();
  23.         this.router.navigate(['/login']);
  24.     }
  25. }

You're using this navbar component in your master component like this:

  1. <app-nav-bar></app-nav-bar>
  2. <div class="content">
  3.     <router-outlet></router-outlet>
  4. </div>
  5. <style>
  6.     .content {
  7.         padding: 20px;
  8.     }
  9. </style>

And for the navbar component CSS:

  1. .mat-sidenav {
  2.     width: 250px;
  3. }
  5. .app-title {
  6.     font-weight: bold;
  7.     font-size: 20px;
  8.     margin-left: 10px;
  9. }
  11. .spacer {
  12.     flex: 1 1 auto;
  13. }
  15. .container {
  16.     height: 100vh;
  17.     display: flex;
  18. }
  20. mat-sidenav-container {
  21.     flex: 1;
  22. }

In your package.json file, you have specified the dependencies and devDependencies for your Angular project.

英文:

I am working on an angular project in which after login I need to show the menu to user which should be collapsable . here is my code for material nav bar but its not opening the menus list when I click on it .

  1.     &lt;mat-toolbar color=&quot;primary&quot;&gt;
  2.         &lt;button mat-icon-button (click)=&quot;toggleCollapse()&quot;&gt;
  3.           &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
  4.         &lt;/button&gt;
  5.         &lt;span class=&quot;app-title&quot;&gt;
  7.  Dashboard&lt;/span&gt;
  8.     &lt;div class=&quot;spacer&quot;&gt;&lt;/div&gt;
  9.     &lt;button mat-raised-button color=&quot;warn&quot; (click)=&quot;logout()&quot;&gt;Logout&lt;/button&gt;
  10.   &lt;/mat-toolbar&gt;
  11.   
  12.   &lt;mat-sidenav-container&gt;
  13.     &lt;mat-sidenav [mode]=&quot;isCollapsed ? &#39;over&#39; : &#39;side&#39;&quot; [opened]=&quot;!isCollapsed&quot;&gt;
  14.       &lt;mat-nav-list&gt;
  15.         &lt;a mat-list-item routerLink=&quot;/dashboard&quot; routerLinkActive=&quot;active-link&quot;&gt;
  16.           &lt;mat-icon&gt;dashboard&lt;/mat-icon&gt;
  17.           &lt;span&gt;Dashboard&lt;/span&gt;
  18.         &lt;/a&gt;
  19.         &lt;a mat-list-item routerLink=&quot;/details&quot; routerLinkActive=&quot;active-link&quot;&gt;
  20.           &lt;mat-icon&gt;info&lt;/mat-icon&gt;
  21.           &lt;span&gt;Details&lt;/span&gt;
  22.         &lt;/a&gt;
  23.         &lt;a mat-list-item routerLink=&quot;/users&quot; routerLinkActive=&quot;active-link&quot;&gt;
  24.           &lt;mat-icon&gt;group&lt;/mat-icon&gt;
  25.           &lt;span&gt;Users&lt;/span&gt;
  26.         &lt;/a&gt;
  27.         &lt;a mat-list-item routerLink=&quot;/change-password&quot; routerLinkActive=&quot;active-link&quot;&gt;
  28.           &lt;mat-icon&gt;lock&lt;/mat-icon&gt;
  29.           &lt;span&gt;Change Password&lt;/span&gt;
  30.         &lt;/a&gt;
  31.       &lt;/mat-nav-list&gt;
  32.     &lt;/mat-sidenav&gt;
  33.   
  34.     &lt;mat-sidenav-content&gt;
  35.       &lt;ng-content&gt;&lt;/ng-content&gt;
  36.     &lt;/mat-sidenav-content&gt;
  37.   &lt;/mat-sidenav-container&gt;

and .ts file as follow :

  1. import { Component } from &#39;@angular/core&#39;;
  2. import { AuthService } from &#39;../auth.service&#39;;
  3. import { Router } from &#39;@angular/router&#39;;
  5. @Component({
  6.   selector: &#39;app-nav-bar&#39;,
  7.   templateUrl: &#39;./nav-bar.component.html&#39;,
  8.   styleUrls: [&#39;./nav-bar.component.css&#39;]
  9. })
  10. export class NavBarComponent {
  11.   isCollapsed = true;
  12.   constructor(private authService: AuthService, private router: Router) { }
  13.   toggleCollapse(): void {
  14.     alert(&quot;Hi&quot;);
  15.    
  16.     this.isCollapsed = !this.isCollapsed;
  17.     
  18.   }
  20.   logout(): void { 
  21.    
  22.     localStorage.removeItem(&#39;token&#39;);
  23.     this.authService.logout();
  24.     this.router.navigate([&#39;/login&#39;]);
  25.   }
  26. }

I am using this nav bar in master component as follow :

  1. &lt;app-nav-bar&gt;&lt;/app-nav-bar&gt;
  2. &lt;div class=&quot;content&quot;&gt;
  3.   &lt;router-outlet&gt;&lt;/router-outlet&gt;
  4. &lt;/div&gt;
  5. &lt;style&gt;
  6.   .content {
  7.     padding: 20px;
  8.   }
  9. &lt;/style&gt;

and for nav bar component css is as follow :

  1. .mat-sidenav {
  2.     width: 250px;
  3.   }
  4.   
  5.   .app-title {
  6.     font-weight: bold;
  7.     font-size: 20px;
  8.     margin-left: 10px;
  9.   }
  10.   
  11.   .spacer {
  12.     flex: 1 1 auto;
  13.   }
  15.   .container {
  16.     height: 100vh;
  17.     display: flex;
  18.   }
  19.   
  20.   mat-sidenav-container {
  21.     flex: 1;
  22.   }

just to insure everone understands what packages I am using so I am putting package.json file as well.

  1. {
  2.   &quot;name&quot;: &quot;pay-ui&quot;,
  3.   &quot;version&quot;: &quot;0.0.0&quot;,
  4.   &quot;scripts&quot;: {
  5.     &quot;ng&quot;: &quot;ng&quot;,
  6.     &quot;start&quot;: &quot;ng serve&quot;,
  7.     &quot;build&quot;: &quot;ng build&quot;,
  8.     &quot;watch&quot;: &quot;ng build --watch --configuration development&quot;,
  9.     &quot;test&quot;: &quot;ng test&quot;
  10.   },
  11.   &quot;private&quot;: true,
  12.   &quot;dependencies&quot;: {
  13.     &quot;@angular/animations&quot;: &quot;~14.0.0&quot;,
  14.     &quot;@angular/cdk&quot;: &quot;^14.0.0&quot;,
  15.     &quot;@angular/common&quot;: &quot;~14.0.0&quot;,
  16.     &quot;@angular/compiler&quot;: &quot;~14.0.0&quot;,
  17.     &quot;@angular/core&quot;: &quot;~14.0.0&quot;,
  18.     &quot;@angular/forms&quot;: &quot;~14.0.0&quot;,
  19.     &quot;@angular/material&quot;: &quot;^14.0.0&quot;,
  20.     &quot;@angular/platform-browser&quot;: &quot;~14.0.0&quot;,
  21.     &quot;@angular/platform-browser-dynamic&quot;: &quot;~14.0.0&quot;,
  22.     &quot;@angular/router&quot;: &quot;~14.0.0&quot;,
  23.     &quot;chart.js&quot;: &quot;^4.3.0&quot;,
  24.     &quot;ng2-charts&quot;: &quot;^4.1.1&quot;,
  25.     &quot;rxjs&quot;: &quot;~7.5.0&quot;,
  26.     &quot;tslib&quot;: &quot;^2.3.0&quot;,
  27.     &quot;zone.js&quot;: &quot;~0.11.4&quot;
  28.   },
  29.   &quot;devDependencies&quot;: {
  30.     &quot;@angular-devkit/build-angular&quot;: &quot;^14.2.11&quot;,
  31.     &quot;@angular/cli&quot;: &quot;~14.0.0&quot;,
  32.     &quot;@angular/compiler-cli&quot;: &quot;~14.0.0&quot;,
  33.     &quot;@types/jasmine&quot;: &quot;~3.10.0&quot;,
  34.     &quot;@types/node&quot;: &quot;^12.11.1&quot;,
  35.     &quot;jasmine-core&quot;: &quot;~4.0.0&quot;,
  36.     &quot;karma&quot;: &quot;~6.3.0&quot;,
  37.     &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
  38.     &quot;karma-coverage&quot;: &quot;~2.1.0&quot;,
  39.     &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
  40.     &quot;karma-jasmine-html-reporter&quot;: &quot;~1.7.0&quot;,
  41.     &quot;typescript&quot;: &quot;~4.6.2&quot;
  42.   }
  43. }

答案1

得分: 1

根据您的代码，您需要为ng-content包装一个div，然后可以将内容投影到<app-nav-bar>projected content</app-nav-bar>中。这里是工作中的Stackblitz代码片段。

  1. <mat-sidenav-content>
  2.     <div class="container">
  3.         <ng-content></ng-content>
  4.     </div>
  5. </mat-sidenav-content>

这将是使用router-outlet进行组件路由的理想解决方案Stackblitz。

英文:

As per your code, You need to wrap a div for ng-content and you can project your content in &lt;app-nav-bar&gt;projected content&lt;/app-nav-bar&gt;. Here is the working Stackblitz snippet.

  1.  &lt;mat-sidenav-content&gt;
  2.     &lt;div class=&quot;container&quot;&gt;
  3.       &lt;ng-content&gt;&lt;/ng-content&gt;
  4.     &lt;/div&gt;
  5.   &lt;/mat-sidenav-content&gt;

This would be the ideal solution using router-outlet for components rounting Stackblitz

huangapple
  • 本文由 发表于 2023年6月12日 17:52:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76455474.html
  • angular
  • angular-material
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定