如何通过 Flex-Layout 设置 Angular Material Footer

Posted 2023-02-23

【中文标题】如何通过 Flex-Layout 设置 Angular Material Footer

【英文标题】：How set up Angular Material Footer via Flex-Layout

【发布时间】：2019-05-22 01:34:43

【问题描述】：

如何在我的应用程序中设置页脚（我使用 Angular Material），以便它：

如果内容高度小于视口，则粘在底部 如果内容高度大于视口，则向下移动/被推下

还有一件更重要的事情——我想通过 angular/flex-layout 来实现这一点，而不是通过标准的 html/CSS 'flex-box'。

<mat-sidenav-container>
  <mat-sidenav #sidenav
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">

    <mat-nav-list>
      <mat-list-item *ngFor="let li of listItems" routerLink="li.link">
        <mat-icon mat-list-icon>li.icon</mat-icon>
        <p mat-line>li.name</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <app-header (menuButtonClick)="sidenav.toggle()"></app-header>

    <ng-content select="[outlet]"></ng-content>

    <app-footer></app-footer>

  </mat-sidenav-content>
</mat-sidenav-container>   

谢谢大家。

【问题讨论】：

Sticky footer in Angular 2 Material的可能重复

嗨@Narm - 我问是否有人知道如何使用 angular/flex-layout 解决这个问题。不是传统的“弹性盒子”。

够公平，点。我发现这与其他问题有点不同。

【参考方案1】：

如果您更喜欢填充内容而不是页脚（Akhi 的解决方案），这里有几行的解决方案：

app.component.html：

<div fxLayout="column" fxFlexFill>
    <app-header></app-header> // your header
    <div fxFlex>
        <router-outlet></router-outlet> // your content
    </div>
    <app-footer></app-footer> // your footer
</div>

styles.css：

html, body 
    height: 100%;
    box-sizing: border-box;
    margin: 0;

【讨论】：

我认为这里不需要fxFlexFill，因为我们需要将它与容器的子元素一起使用。

【参考方案2】：

通过添加fxLayout="column" 来制作容器flex 和方向column 并通过fxFlexOffset="auto"使页脚粘底

  <mat-sidenav-content fxLayout="column">

    <app-header (menuButtonClick)="sidenav.toggle()"></app-header>

    <ng-content select="[outlet]"></ng-content>

    <app-footer fxFlexOffset="auto"></app-footer>

  </mat-sidenav-content>