将应用程序内容放在mat-sidenav-content中
将应用程序内容放在mat-sidenav-content中
提问于 2020-09-28 21:49:05
我有一个使用FlexLayoutModule的应用程序。我有一个头，这是响应的网络和移动，但我不确定我应该如何正确地构建我的应用程序。我想在mat-sidenav-container中添加我的应用程序内容。
header.component.html
<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>Wilderness Adventures</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/about-us">Latest listings</a>
<a mat-button routerLink="/prices">Experiences</a>
<a mat-button routerLink="/start-page">Hot deal</a>
<mat-icon>home</mat-icon>Become a host
</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-us">Latest listings</a>
<a mat-button routerLink="/prices">Experiences</a>
<a mat-button routerLink="/start-page">Hot deal</a>
<mat-icon>home</mat-icon>Become a host
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
<!--should app content go here-->
</mat-sidenav-content>
</mat-sidenav-container>
</div>app.component.html
<app-landing></app-landing>
<router-outlet></router-outlet>这是我的应用程序的完整堆栈闪电战
https://stackblitz.com/edit/angular-ivy-gygw2g?file=src/app/app.component.html
如果您看到应用程序，您会注意到我的内容位于mat-sidenav-container下面，但我不想使用蓝色块
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-28 22:12:11
此部分将不起作用，因为您希望在导航到另一条路线时替换登录页面：
<app-landing></app-landing>
<router-outlet></router-outlet>您的Header组件更像是一个主/核心组件，因为它同时包含标头和将显示路由内容的mat-sidenav-container。
但在本例中保留其名称，您可以将其直接包含在AppComponent中，将router-outlet放入其标记中：
<app-header><router-outlet></router-outlet></app-header然后，您可以使用内容投影来放置router-outlet into the mat-sidenav-container：
<mat-sidenav-container>
<ng-content></ng-content>
</mat-sidenav-container>最后，要在sidenav容器中显示登录页面，请声明一条路径以将其访问到您的AppRoutingMOdule中：
const routes: Routes = [{path: '', component: LandingComponent}]并在HeaderComponent的导航栏中添加一个routerlink
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64103525
复制相关文章
相似问题
腾讯云开发者
