mat-menu在固定的底部导航栏上向下滚动页面，仅移动和镶边

Question

依赖性：@ angular / material 6.4.7，@ angular / cdk 6.4.7

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

他们说它是固定的，但是我仍然可以通过移动和铬获得以下行为

注意：滚动时出现的“皮卡丘按钮”不会影响任何内容，已测试。

<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”是默认设置，并在滚动时更改mat-menu的位置...“ noop”表示无论页面是否滚动，其将保持在同一位置，“ close”表示无论何时您都将关闭mat-menu开始在Mat-menu菜单外滚动...最后，“ block”表示您不能在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();
};