可收縮的墊子工具欄

Question

我使用此處提供的示例來設置響應式導航欄

https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/

我的代碼看起來非常相似

<div style="height: 85vh;">

  <mat-toolbar color="primary" mat-scroll-shrink>
    <span>{{title}}</span>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>Home</a>
      <a href="#" mat-button>About</a>
      <a href="#" mat-button>Services</a>
      <a href="#" mat-button>Portfolio</a>
      <a href="#" mat-button>Start</a>
      <a href="#" mat-button>FAQ</a>
      <a href="#" mat-button>Blog</a>
      <a href="#" mat-button>Contact</a>
    </div>

    <div fxShow="true" fxHide.gt-sm="true">
      <a href="#" (click)="sidenav.open()">Show Side Menu</a>
    </div>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav fxLayout="column">
      <div fxLayout="column">
        <a (click)="sidenav.close()" href="#" mat-button>Close</a>
        <a href="#" mat-button>Home</a>
        <a href="#" mat-button>About</a>
        <a href="#" mat-button>Services</a>
        <a href="#" mat-button>Portfolio</a>
        <a href="#" mat-button>Start</a>
        <a href="#" mat-button>FAQ</a>
        <a href="#" mat-button>Blog</a>
        <a href="#" mat-button>Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>

      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

我想要發生的是當我向下滾動時，mat-toolbar會縮小，這在很多站點都很常見，比如這個：

https://www.havealook.com.au/

我不會發布其余的角度5代碼，只需按照示例重新創建 - 它非常快。

我在這里查看了材料網站

https://material.angular.io/components/toolbar/overview

但是關於如何添加它沒有太多解釋，我對這些東西很新。 有沒有人知道如何自定義這個以使工具欄縮小，基於滾動？

Answer 1

2018年11月更新

ScrollDispatchModule已棄用Angular CDK v7。 請改用ScrollingModule 。

---

我創建了一個Stackblitz ，其工具欄在向下滾動時會縮小。

主要步驟

使用CdkScrollDispatcher服務來響應滾動事件

1. 在模塊中導入ScrollDispatchModule 。

import {ScrollDispatchModule} from '@angular/cdk/scrolling';

2. 標記滾動事件與指令cdkScrollable相關的cdkScrollable ，這里是mat-sidenav-content 。

 <mat-sidenav-content fxFlexFill cdkScrollable>

3. React在組件的ngOnInit中滾動事件，獲取scrollTop位置並設置一個標志，如果它大於某個閾值：

private readonly SHRINK_TOP_SCROLL_POSITION = 50;
shrinkToolbar = false;

constructor(private scrollDispatcher: ScrollDispatcher,
            private ngZone: NgZone) { }

ngOnInit() {
  this.scrollDispatcher.scrolled()
    .pipe(
      map((event: CdkScrollable) => event.getElementRef().nativeElement.scrollTop)
    )
    .subscribe(scrollTop => this.ngZone.run(() => this.shrinkToolbar = scrollTop > this.SHRINK_TOP_SCROLL_POSITION ? true : false));
}

您需要使用ngZone運行它，因為默認情況下ScrollDispatcher scrolled()事件在ScrollDispatcher之外運行。 沒有它，ChangeDetection將無法運行，您的模板也不會更新。

滾動時更改工具欄布局

1. 當容器向下滾動時，添加一個shrink css類

<mat-toolbar color="primary" [ngClass]="{'shrink-toolbar': shrinkToolbar}">

2. layout. 為布局定義css類。

.shrink-toolbar {
  height: 32px;
}

在官方文檔中查找有關滾動服務的更多信息。