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

Posted 2023-03-13

【中文标题】将应用内容放在 mat-sidenav-content 中

【英文标题】：Place app content inside mat-sidenav-content

【发布时间】：2021-01-14 02:46:25

【问题描述】：

我有一个使用 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 下方，但我不想有蓝色块

【参考方案1】：

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

<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-container 中显示您的着陆页，请在 AppRoutingMOdule 中声明访问它的路由：

const routes: Routes = [path: '', component: LandingComponent]

并在 HeaderComponent 的导航栏中添加 routerlink