我正在使用一个 mat-sidenav-container,它包含一个 mat-sidenav 和一个 mat-sidenav-content。mat-sidenav 有一些链接,这些链接应该根据我的 app.component.ts 中的布尔值显示。
我正在使用 mat-sidenav-container
包含 mat-sidenav
和的 mat-sidenav-content
.
有 mat-sidenav
一些链接应该根据我的 app.component.ts 中的布尔值显示。因此,渲染过程中会出现问题,侧边导航会绘制在内容之上,而不是将内容渲染到侧边导航的右侧。
例子:
读了一会儿之后,关于这个话题的抱怨越来越多。我 在这里 ,解决这个问题的办法是使用 autosize
上的属性 mat-sidenav-container
,但它带来了一些问题, 这里 .
因此,我开始尝试在 github 页面上提出的另一个建议,以“重置”模式 mat-sidenav
.
这有效,但只有当我添加延迟时才有效。
应用程序.组件.html
async ngOnInit() {
this.isLoggedIn = await this.authService.isLoggedIn();
this.isAdmin = await this.authService.isAdmin();
console.log("app started");
// when I add a delay of zero milliseconds, my sidenav content is drawn correctly???
//await delayMilliseconds(0);
this.sidenav.mode = 'side';
}
为了完整性实施 delayMilliseconds
export function delayMilliseconds(ms: number): Promise<void> {
return new Promise(resolve => setTimeout(resolve, ms));
}
那么 mat-sidenav 的黑暗到底是怎么回事?我不介意保留我当前的 \'hack\' 并将延迟设置为零,但我最想更好地理解为什么在没有延迟的情况下会出现问题。或者更确切地说,为什么不重置模式就无法正常工作。这真的是一个错误还是我做错了什么?
为了完整性,整个 app.component.html
<mat-toolbar color="primary">
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon" (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span style="margin-left: 5px;">{{title}}</span>
<span class="example-spacer"></span>
<button *ngIf="isLoggedIn" type="button" (click)="logout()">
<mat-icon>logout</mat-icon>
</button>
<button *ngIf="!(isLoggedIn)" type="button" (click)="login()">
<mat-icon>login</mat-icon>
</button>
</mat-toolbar>
<mat-sidenav-container style="height:100vh;">
<mat-sidenav #sidenav mode="side" opened="true">
<mat-nav-list>
<a mat-list-item routerLink="/home">Home</a>
<a *ngIf="isLoggedIn" mat-list-item routerLink="/dashboard">Dashboard</a>
<a *ngIf="isLoggedIn" mat-list-item routerLink="/customers">Customers</a>
<a *ngIf="isLoggedIn" mat-list-item routerLink="/projects">Projects</a>
<a *ngIf="isLoggedIn" mat-list-item routerLink="/usersettings">User settings</a>
<a *ngIf="isAdmin" mat-list-item routerLink="/admin">Admin</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content style="padding-top: 0px; padding-left: 20px; padding-right: 20px;">
<router-outlet ></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
以及完整的 app.compoment.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { AuthService } from "./auth-service";
import { CustomerService } from './customer-service';
import { KeycloakProfile } from 'keycloak-js';
import { MatSidenav } from '@angular/material/sidenav';
import { delayMilliSeconds as delayMilliseconds } from 'src/common/utils/delay';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild('sidenav') sidenav: MatSidenav;
title = 'Projects buddy';
public isLoggedIn : boolean;
public userProfile: KeycloakProfile | null = null;
isAdmin = false ;
constructor(
private readonly authService : AuthService,
private customerService : CustomerService,
) {}
async ngOnInit() {
this.isLoggedIn = await this.authService.isLoggedIn();
this.isAdmin = await this.authService.isAdmin();
console.log("app started");
await delayMilliseconds(0);
this.sidenav.mode = 'side';
}
async login() {
if (!this.isLoggedIn) {
console.log("logging in keycloak");
await this.authService.login();
}
}
async logout() {
if (this.isLoggedIn) {
console.log("logging off keycloak");
await this.authService.logoff();
}
}
}
结束语
-
没有\'奇怪的黑客\'
mat-nav-list
绘制在顶部 mat-nav-content
-
第一个解决方法是添加到
autosize
, mat-sidenav-container
但官方文档中的布局破坏警告让我不敢采用这种方法
-
重置模式的第二种解决方法
mat-sidenav
似乎仅在我添加零延迟时才有效,这没有意义,但我还是尝试了。
-
这种奇怪的行为真的是由角度材料中的错误引起的吗?还是我以错误的方式使用了它们的组件?有什么建议可以改善/解决这个问题吗?
由于 app.component 中的可观察对象,Angular mat-sidenav 最初覆盖了 nav-content
下载声明:
本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!