mat-menu 与固定底部导航上的页面一起向下滚动，仅限移动设备和 Chrome

Question

依赖项：@angular/material 6.4.7、@angular/cdk 6.4.7

问题：https://github.com/angular/material2/issues/11365

他们说它是固定的，但我仍然得到以下行为，仅在移动和 Chrome 上

注意：滚动时出现的皮卡丘按钮不会影响任何东西，经过测试。

<button class="nav-Menu" mat-icon-button [matMenuTriggerFor]="menu">
 <mat-icon>more_vert</mat-icon>
</button>

<mat-menu #menu="matMenu" [overlapTrigger]="false">

<button [routerLink]="['home']" routerLinkActive="active" mat-menu-item>
  <mat-icon svgIcon="pikachu"></mat-icon> <!-- Home -->
  <span>Home</span>
</button>

<button routerLinkActive="active" mat-menu-item 
 [matMenuTriggerFor]="Database">
  <mat-icon svgIcon="database"></mat-icon> <!-- Database -->
  <span>Database</span>
</button>

<button routerLinkActive="active" mat-menu-item [matMenuTriggerFor]="Tools">
 <mat-icon svgIcon="tools"></mat-icon> <!-- Tools -->
 <span>Tools</span>
</button>

<button routerLinkActive="active" mat-menu-item 
[matMenuTriggerFor]="Guides">
  <mat-icon svgIcon="guides"></mat-icon> <!-- Guides -->
  <span>Guides</span>
</button>

</mat-menu>

<mat-menu #Database="matMenu" > <!-- Database Menu -->
  <button [routerLink]="['pokedex']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="bulbasaur"></mat-icon>Pokédex
  </button>
  <button [routerLink]="['moves']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="move"></mat-icon>Moves
  </button>
</mat-menu>

<mat-menu #Tools="matMenu" > <!-- Tools Menu -->
  <button [routerLink]="['laboratory']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="laboratory"></mat-icon>Laboratory
  </button>
</mat-menu>

<mat-menu #Guides="matMenu"> <!-- Guides Menu -->
  <button [routerLink]="['guides/victory-road']" routerLinkActive="active"
      mat-menu-item><mat-icon svgIcon="victory-road"></mat-icon>Victory Road
  </button>
</mat-menu>

注意 2：顶部导航垫菜单按预期工作，仅在底部固定导航上发布

Answer 1

好吧，我不知道它是否有帮助，但是角度材质中的大多数“弹出”组件都有一些共同点，例如背景和 panelClass，以及定义这些组件应该如何表现的 ScrollStrategy。有 4 种类型，“reposition”、“noop”、“close”和“block”。 “reposition”是默认设置，当你滚动时会改变 mat-menu 的位置……“noop”意味着无论页面是否滚动，它都会保持在相同的位置，“close”意味着 mat-menu 会在你关闭时关闭开始在垫子菜单之外滚动...最后“阻止”意味着您不能在垫子菜单之外滚动。这是我如何根据用户的设备（是否可触摸）有条件地实现它的示例：

import { MAT_MENU_SCROLL_STRATEGY } from '@angular/material';
import { Overlay, BlockScrollStrategy, RepositionScrollStrategy, CloseScrollStrategy, NoopScrollStrategy } from '@angular/cdk/overlay';


const isToucheDevice = () => {
  try {
    document.createEvent('TouchEvent');
    return true;
  } catch (e) {
    return false;
  }
};

const scrollBlockFactory = (overlay: Overlay): () => BlockScrollStrategy  => {
  return () => overlay.scrollStrategies.block();
};

const scrollRepositionFactory = (overlay: Overlay): () => RepositionScrollStrategy  => {
  return () => overlay.scrollStrategies.reposition();
};

@Component({
  selector: 'app-search-criteria-form',
  templateUrl: './search-criteria-form.component.html',
  styleUrls: ['./search-criteria-form.component.scss'],
  providers: [
    { provide: MAT_MENU_SCROLL_STRATEGY, useFactory: isToucheDevice() ? scrollBlockFactory : scrollRepositionFactory, deps: [Overlay] }
  ]
})

将它添加到组件的提供程序中很重要，顺便说一句，它必须在父组件中，或者至少我不能让它在我使用 mat-menu 的同一级别上工作。 . 同样重要的是，无论何时您在检查函数时都在传递类型，定义它是否应该返回 RepositionScrollStrategy 或其他任何一个。像这样（显然没有星星）：

const scrollRepositionFactory = (overlay: Overlay): () => **RepositionScrollStrategy**  => {
  return () => overlay.scrollStrategies.reposition();
};