如何更改固定标头的大小

Question

这是我项目的一部分：应用

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

Answer 1

您不需要使用引导程序的fixed-top，只需要将头放在正确的位置即可。对于"侧"模式，标头需要位于sidenav内容内，以便与内容一起推送。对于"over"模式，标头需要位于侧导航的上方和外部。您可以使用模板逻辑：

<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定义了默认值。

这可能不是您想要的，但它向您展示了如何动态更改标头位置。您可能需要将布局添加到应用程序侧导航和主题主内容类中。