由于 app.component 中的可观察对象，Angular mat-sidenav 最初覆盖了 nav-content
55
0
我正在使用一个 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似乎仅在我添加零延迟时才有效，这没有意义，但我还是尝试了。 - 这种奇怪的行为真的是由角度材料中的错误引起的吗？还是我以错误的方式使用了它们的组件？有什么建议可以改善/解决这个问题吗？
