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

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

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.

<mat-toolbar color="primary">
    <button mat-icon-button (click)="toggleCollapse()">
        <mat-icon>menu</mat-icon>
    </button>
    <span class="app-title">Dashboard</span>
    <div class="spacer"></div>
    <button mat-raised-button color="warn" (click)="logout()">Logout</button>
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav [mode]="isCollapsed ? 'over' : 'side'" [opened]="!isCollapsed">
        <mat-nav-list>
            <a mat-list-item routerLink="/dashboard" routerLinkActive="active-link">
                <mat-icon>dashboard</mat-icon>
                <span>Dashboard</span>
            </a>
            <a mat-list-item routerLink="/details" routerLinkActive="active-link">
                <mat-icon>info</mat-icon>
                <span>Details</span>
            </a>
            <a mat-list-item routerLink="/users" routerLinkActive="active-link">
                <mat-icon>group</mat-icon>
                <span>Users</span>
            </a>
            <a mat-list-item routerLink="/change-password" routerLinkActive="active-link">
                <mat-icon>lock</mat-icon>
                <span>Change Password</span>
            </a>
        </mat-nav-list>
    </mat-sidenav>

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

And in the .ts file:

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-nav-bar',
    templateUrl: './nav-bar.component.html',
    styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent {
    isCollapsed = true;

    constructor(private authService: AuthService, private router: Router) { }

    toggleCollapse(): void {
        alert("Hi");
        this.isCollapsed = !this.isCollapsed;
    }

    logout(): void {
        localStorage.removeItem('token');
        this.authService.logout();
        this.router.navigate(['/login']);
    }
}

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

<app-nav-bar></app-nav-bar>
<div class="content">
    <router-outlet></router-outlet>
</div>
<style>
    .content {
        padding: 20px;
    }
</style>

And for the navbar component CSS:

.mat-sidenav {
    width: 250px;
}

.app-title {
    font-weight: bold;
    font-size: 20px;
    margin-left: 10px;
}

.spacer {
    flex: 1 1 auto;
}

.container {
    height: 100vh;
    display: flex;
}

mat-sidenav-container {
    flex: 1;
}

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 .

    &lt;mat-toolbar color=&quot;primary&quot;&gt;
        &lt;button mat-icon-button (click)=&quot;toggleCollapse()&quot;&gt;
          &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
        &lt;span class=&quot;app-title&quot;&gt;

 Dashboard&lt;/span&gt;
    &lt;div class=&quot;spacer&quot;&gt;&lt;/div&gt;
    &lt;button mat-raised-button color=&quot;warn&quot; (click)=&quot;logout()&quot;&gt;Logout&lt;/button&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;mat-sidenav-container&gt;
    &lt;mat-sidenav [mode]=&quot;isCollapsed ? &#39;over&#39; : &#39;side&#39;&quot; [opened]=&quot;!isCollapsed&quot;&gt;
      &lt;mat-nav-list&gt;
        &lt;a mat-list-item routerLink=&quot;/dashboard&quot; routerLinkActive=&quot;active-link&quot;&gt;
          &lt;mat-icon&gt;dashboard&lt;/mat-icon&gt;
          &lt;span&gt;Dashboard&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item routerLink=&quot;/details&quot; routerLinkActive=&quot;active-link&quot;&gt;
          &lt;mat-icon&gt;info&lt;/mat-icon&gt;
          &lt;span&gt;Details&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item routerLink=&quot;/users&quot; routerLinkActive=&quot;active-link&quot;&gt;
          &lt;mat-icon&gt;group&lt;/mat-icon&gt;
          &lt;span&gt;Users&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item routerLink=&quot;/change-password&quot; routerLinkActive=&quot;active-link&quot;&gt;
          &lt;mat-icon&gt;lock&lt;/mat-icon&gt;
          &lt;span&gt;Change Password&lt;/span&gt;
        &lt;/a&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
  
    &lt;mat-sidenav-content&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;

and .ts file as follow :

import { Component } from &#39;@angular/core&#39;;
import { AuthService } from &#39;../auth.service&#39;;
import { Router } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;app-nav-bar&#39;,
  templateUrl: &#39;./nav-bar.component.html&#39;,
  styleUrls: [&#39;./nav-bar.component.css&#39;]
})
export class NavBarComponent {
  isCollapsed = true;
  constructor(private authService: AuthService, private router: Router) { }
  toggleCollapse(): void {
    alert(&quot;Hi&quot;);
   
    this.isCollapsed = !this.isCollapsed;
    
  }

  logout(): void { 
   
    localStorage.removeItem(&#39;token&#39;);
    this.authService.logout();
    this.router.navigate([&#39;/login&#39;]);
  }
}

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

&lt;app-nav-bar&gt;&lt;/app-nav-bar&gt;
&lt;div class=&quot;content&quot;&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;/div&gt;
&lt;style&gt;
  .content {
    padding: 20px;
  }
&lt;/style&gt;

and for nav bar component css is as follow :

.mat-sidenav {
    width: 250px;
  }
  
  .app-title {
    font-weight: bold;
    font-size: 20px;
    margin-left: 10px;
  }
  
  .spacer {
    flex: 1 1 auto;
  }

  .container {
    height: 100vh;
    display: flex;
  }
  
  mat-sidenav-container {
    flex: 1;
  }

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

{
  &quot;name&quot;: &quot;pay-ui&quot;,
  &quot;version&quot;: &quot;0.0.0&quot;,
  &quot;scripts&quot;: {
    &quot;ng&quot;: &quot;ng&quot;,
    &quot;start&quot;: &quot;ng serve&quot;,
    &quot;build&quot;: &quot;ng build&quot;,
    &quot;watch&quot;: &quot;ng build --watch --configuration development&quot;,
    &quot;test&quot;: &quot;ng test&quot;
  },
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;@angular/animations&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/cdk&quot;: &quot;^14.0.0&quot;,
    &quot;@angular/common&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/compiler&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/core&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/forms&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/material&quot;: &quot;^14.0.0&quot;,
    &quot;@angular/platform-browser&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/platform-browser-dynamic&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/router&quot;: &quot;~14.0.0&quot;,
    &quot;chart.js&quot;: &quot;^4.3.0&quot;,
    &quot;ng2-charts&quot;: &quot;^4.1.1&quot;,
    &quot;rxjs&quot;: &quot;~7.5.0&quot;,
    &quot;tslib&quot;: &quot;^2.3.0&quot;,
    &quot;zone.js&quot;: &quot;~0.11.4&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@angular-devkit/build-angular&quot;: &quot;^14.2.11&quot;,
    &quot;@angular/cli&quot;: &quot;~14.0.0&quot;,
    &quot;@angular/compiler-cli&quot;: &quot;~14.0.0&quot;,
    &quot;@types/jasmine&quot;: &quot;~3.10.0&quot;,
    &quot;@types/node&quot;: &quot;^12.11.1&quot;,
    &quot;jasmine-core&quot;: &quot;~4.0.0&quot;,
    &quot;karma&quot;: &quot;~6.3.0&quot;,
    &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
    &quot;karma-coverage&quot;: &quot;~2.1.0&quot;,
    &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
    &quot;karma-jasmine-html-reporter&quot;: &quot;~1.7.0&quot;,
    &quot;typescript&quot;: &quot;~4.6.2&quot;
  }
}

答案1

得分: 1

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

<mat-sidenav-content>
    <div class="container">
        <ng-content></ng-content>
    </div>
</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.

 &lt;mat-sidenav-content&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  &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
匿名

发表评论

匿名网友

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

确定