当工具栏组件不在页面顶部时，将其隐藏

Question

我有一个像这样的工具栏
它的背景是透明的。但是当我向下滚动时，它看起来像
向下滚动页面时如何隐藏此组件，向上滚动至页面顶部时如何显示该组件？ 我英文不太好。抱歉。

编辑： 我使用mat-toolbar

<mat-toolbar color="primary">

<button mat-button routerLink="/" [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}">
<mat-icon>home</mat-icon> 
{{ 'PAGE.HOME' | translate}}</button>

<!-- This fills the remaining space of the current row -->
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}">
    <button mat-button routerLink="['/home']">{{ 'PAGE.HOME' | translate}}</button>
    <button mat-button routerLink="['/home']">{{ 'PAGE.D9' | translate}}</button>
    <button mat-button routerLink="['/home']">{{ 'PAGE.DThuDuc' | translate}}</button>
    <button mat-button routerLink="['/home']">{{ 'PAGE.MORE' | translate}}</button>
    <button mat-button [routerLink]="['/add']">{{ 'PAGE.ADD' | translate}}</button>
    <button mat-button [routerLink]="['/login']" *ngIf="!loginStatus">{{ 'PAGE.LOGIN' | translate}}</button>
    <button mat-button [routerLink]="['/login']" *ngIf="loginStatus">{{ 'PAGE.LOGOUT' | translate}}</button>
    <button mat-button [routerLink]="['/show-map']" [queryParams]="{ lat: data.lat, lng: data.lng}">{{ 'PAGE.OVERVIEW' | translate}}</button>



</div>
<button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
 <mat-icon>menu</mat-icon>
</button>

</mat-toolbar>

.mat-toolbar {

    position: fixed;
    z-index: 999;
}

Answer 1

只需使用@HostListener窗口：滚动

  @HostListener("window:scroll", [])
  onWindowScroll() {
    let number = window.pageYOffset || 0;
    console.log(number);
  }

一些作者认为不好的做法是直接引用窗口。布莱恩·洛夫（Brian Love）向“窗口提供者”提出了建议：请参见http://brianflove.com/2018/01/11/angular-window-provider/

Brian Love伴侣的解决方案：

****这是引用的文章的副本和粘贴******

import { isPlatformBrowser } from "@angular/common";
import { ClassProvider, FactoryProvider, InjectionToken, PLATFORM_ID } from '@angular/core';

/* Create a new injection token for injecting the window into a component. */
export const WINDOW = new InjectionToken('WindowToken');

/* Define abstract class for obtaining reference to the global window object. */
export abstract class WindowRef {

  get nativeWindow(): Window | Object {
    throw new Error('Not implemented.');
  }

}

/* Define class that implements the abstract class and returns the native window object. */
export class BrowserWindowRef extends WindowRef {

  constructor() {
    super();
  }

  get nativeWindow(): Window | Object {
    return window;
  }

}

/* Create an factory function that returns the native window object. */
export function windowFactory(browserWindowRef: BrowserWindowRef, platformId: Object): Window | Object {
  if (isPlatformBrowser(platformId)) {
    return browserWindowRef.nativeWindow;
  }
  return new Object();
}

/* Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. */
const browserWindowProvider: ClassProvider = {
  provide: WindowRef,
  useClass: BrowserWindowRef
};

/* Create an injectable provider that uses the windowFactory function for returning the native window object. */
const windowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: windowFactory,
  deps: [ WindowRef, PLATFORM_ID ]
};

/* Create an array of providers. */
export const WINDOW_PROVIDERS = [
  browserWindowProvider,
  windowProvider
];

在组件的构造函数中

constructor(@Inject(WINDOW) private window: Window)

在模块中

@NgModule({
  declarations: [..]
  imports: [..]
  providers: [WINDOW_PROVIDERS,...],
})

Answer 2

以样式添加 位置：固定； z-index：1000；  将样式设置为标题的主div。

Answer 3

在正文标签中使用(window:scroll)="eventToBeCalled()"

为工具栏分配ID： <mat-toolbar color="primary" id="matTB">

和打字稿

eventToBeCalled(): void {
   const matToolBar = document.getElementById('matTB');
   if(window.scrollY > 104)
   {
    matToolBar.setAttribute('style', 'display:none');
   } else {
    matToolBar.removeAttribute('style');
   }
}