具有灵活布局的角度材料侧导航-无法路由到不同的页面

Question

当我点击超链接时，需要关于如何路由到不同页面的帮助(当浏览器是全窗口而不是全窗口时，这意味着右上角的菜单(。

创建了此堆栈litz。

我是否必须需要垫子侧导航内容fxFlexFill并提供高度垫子侧导航容器

.mat-sidenav-container{
background-color: lightskyblue;
min-height: 93vh !important;
}
<div> 
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="companyName" routerLink="/">
<span>Site name</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/about">About us</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<a mat-button routerLink="/about">About us..</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
Awesome content
</mat-sidenav-content>
</mat-sidenav-container>
</div>

Answer 1

您的问题实际上不是问题。你看不到路由器工作的原因是因为你正在路由器出口上渲染一个元素

<div> 
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="companyName" routerLink="/">
<span>Site name</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/about">About us</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<a mat-button routerLink="/about">About us..</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
Awesome content // <-- RIGHT HERE should be router outlet, this is what is displayed as the main 'content'
</mat-sidenav-content>
</mat-sidenav-container>
</div>

所以更改

<mat-sidenav-content fxFlexFill>
Awesome content
</mat-sidenav-content>

至

<mat-sidenav-content fxFlexFill>
<router-outlet></router-outlet>
</mat-sidenav-content>