时间戳

首页 > 解决方案 > 将应用内容放在 mat-sidenav-content 中

angular - 将应用内容放在 mat-sidenav-content 中

问题描述

我有一个使用 FlexLayoutModule 的应用程序。我有一个对 Web 和移动设备都响应的标头，但是我不确定应该如何正确构建我的应用程序。我想在 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 下方，但我不想有蓝色块

标签： angularangular-material

解决方案

这部分不起作用，因为您希望在导航到另一条路线时替换您的登录页面：

<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}]

并将 a 添加routerlink到 HeaderComponent 的导航栏中

推荐阅读