Angular SideNav 不会根据路由更新内容
Posted
技术标签:
【中文标题】Angular SideNav 不会根据路由更新内容【英文标题】:Angular SideNav doesn't update content according to route 【发布时间】:2022-01-18 19:43:52 【问题描述】:我正在尝试创建一个固定的 sidenav,它会根据路线更新其内容。它不适用于导航,仅在刷新页面后。我做错了什么?
App.component.ts
export class AppComponent
title = 'foo';
showSideNav = false;
constructor(private router: Router )
this.router.events.subscribe((e) =>
if (e instanceof NavigationEnd)
this.showSideNav = e.url != "/login";
);
App.component.html
<app-header></app-header>
<mat-sidenav-container *ngIf="showSideNav">
<mat-sidenav mode="side" opened>
<h4 class="name">Foo</h4>
<p class="designation">Barr</p>
<mat-divider></mat-divider>
<button mat-button class="menu-button" [routerLink]="['/baar']">
<mat-icon>dangerous</mat-icon>
<span>baar</span>
</button>
</mat-sidenav>
<mat-sidenav-content>
<div class="content mat-elevation-z8">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<router-outlet *ngIf="!showSideNav"></router-outlet>
【问题讨论】:
【参考方案1】:将 routerlink 更改为 routerLink="/baar"。检查下面的代码。
<app-header></app-header>
<mat-sidenav-container *ngIf="showSideNav">
<mat-sidenav mode="side" opened>
<h4 class="name">Foo</h4>
<p class="designation">Barr</p>
<mat-divider></mat-divider>
<button mat-button class="menu-button" routerLink="/baar">
<mat-icon>dangerous</mat-icon>
<span>baar</span>
</button>
</mat-sidenav>
<mat-sidenav-content>
<div class="content mat-elevation-z8">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<router-outlet *ngIf="!showSideNav"></router-outlet>
【讨论】:
我仍然无法让它工作。地址栏显示了所需的路线,但里面的组件没有改变。它仅在页面刷新后更改。以上是关于Angular SideNav 不会根据路由更新内容的主要内容,如果未能解决你的问题,请参考以下文章