英文:
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 .
<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 .ts file as follow :
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']);
}
}
I am using this nav bar in master component as follow :
<app-nav-bar></app-nav-bar>
<div class="content">
<router-outlet></router-outlet>
</div>
<style>
.content {
padding: 20px;
}
</style>
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.
{
"name": "pay-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~14.0.0",
"@angular/cdk": "^14.0.0",
"@angular/common": "~14.0.0",
"@angular/compiler": "~14.0.0",
"@angular/core": "~14.0.0",
"@angular/forms": "~14.0.0",
"@angular/material": "^14.0.0",
"@angular/platform-browser": "~14.0.0",
"@angular/platform-browser-dynamic": "~14.0.0",
"@angular/router": "~14.0.0",
"chart.js": "^4.3.0",
"ng2-charts": "^4.1.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.11",
"@angular/cli": "~14.0.0",
"@angular/compiler-cli": "~14.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.2"
}
}
答案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 <app-nav-bar>projected content</app-nav-bar>
. Here is the working Stackblitz snippet.
<mat-sidenav-content>
<div class="container">
<ng-content></ng-content>
</div>
</mat-sidenav-content>
This would be the ideal solution using router-outlet
for components rounting Stackblitz
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论