0

这是我项目的一部分：app

我希望标题在滚动时得到固定，并且我fixed-top在 header.component.html 文件中的标题中添加了引导类。但是当我将sidenav的模式更改为side标题时不会改变并被推到左边。我该如何解决这个问题？

4

1 回答 1

0

您不需要使用引导程序fixed-top- 您只需要将标题放在正确的位置。对于您的“侧面”模式，标题需要位于 sidenav 内容内，以便与内容一起推送。对于“over”模式，标题需要完全位于 sidenav 的上方和外部。您可以使用模板逻辑执行此操作：

<ng-container *ngIf="!pushed" [ngTemplateOutlet]="appHeader"></ng-container>

<mat-sidenav-container class="theme-sidenav-container" autosize>

    <mat-sidenav class="theme-sidenav" #sidenav [mode]="mode" position="end" opened="false" (mouseleave)="pushed? 2+2 :sidenav.toggle()">
        ...
    </mat-sidenav>

    <mat-sidenav-content class="theme-main-content">

        <ng-container *ngIf="pushed" [ngTemplateOutlet]="appHeader"></ng-container>

        <router-outlet></router-outlet>

    </mat-sidenav-content>

</mat-sidenav-container>

<ng-template #appHeader>
  <app-header (toggleSidenav)="sidenav.toggle()" [menuAvailable]="pushed"></app-header>
</ng-template>

这是在StackBlitz上。请注意，我还删除了fixed-top类并为 和 定义了默认mode值pushed。

这可能不是您想要的，但它向您展示了如何动态更改标题位置。您可能需要将布局添加到 app-sidenav 和 theme-main-content 类。

于 2018-12-12T20:53:46.137 回答