我可以在 Angular Material 菜单组件上使用哪些不同的方向属性？

Question

从 Angular Material Documentation 我可以在菜单组件上使用 direction 属性：

direction: Direction : Layout direction of the menu.

这意味着有一个类型，Direction，但我找不到它，也不知道如何在菜单组件上使用它。

我尝试了以下方法，但我不确定我可以在 direction- 属性中放入哪些值。我以为我可以使用 Direction.UP 或 Direction.DOWN 之类的东西，但我无法在我的项目中找到 Direction class。是否有隐藏的地方可以从中导入它？

<button mat-raised-button type="button" [matMenuTriggerFor]="saveBtn" color="primary">Ny rad</button>
<mat-menu #saveBtn="matMenu" [direction]="'up'"> <!-- Here I am using [direction], but do not know what to put as a value there, that is of type Direction -->
<button mat-menu-item (click)="save('1')">Save 1</button>
<button mat-menu-item (click)="save('2')">Save 2</button>
</mat-menu>

编辑

搜索了一段时间后，我发现我可以使用值 'ltr' 和 'rtl'，我不得不在使用 matMenuTriggerFor- 的元素上使用它选择器。

在 Visual Studio 代码中声明类型为 Direction 的变量后，它建议我 import { Direction } from '@angular/cdk/bidi';，该类型如下所示：

export declare type Direction = 'ltr' | 'rtl';

即使我找到了这个，我还是收到一条错误消息，指出

Template parse errors: Can't bind to 'direction' since it isn't a known property of 'mat-menu'.

当我尝试在 mat-menu 元素上使用 direction 属性时，即使文档说我可以使用方向属性。我做错了什么吗？

Answer 1

Direction 类型是 Angular CDK 库中双向 API 的一部分。与任何其他功能一样，您需要将其模块导入您的应用程序（例如 app.module.ts）才能使用它：

import {BidiModule} from '@angular/cdk/bidi';

详情请见the API docs。

Answer 2

mat-menu 将从父容器继承 dir 属性而不导入 cdk ...请注意父容器 dir="rtl" div

<div dir="rtl">  
  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</div>

Stackblitz

https://stackblitz.com/edit/angular-ol2cz5?embed=1&file=app/menu-overview-example.html

修订

mat-menu 从此处的 menu-directive.ts 自动导入 cdk/bidi。

https://github.com/angular/material2/blob/0b19b586d81feb667958152d033fd4c461a7479c/src/lib/menu/menu-directive.ts#L10

在 bidi directionality.ts 中，如果未指定，此行默认定义 ltr。

this.value = (value === 'ltr' || value === 'rtl') ? value : 'ltr';

请在查看超链接时注意这行代码上方的行...因为这就是 directionality.ts 从父容器或全局文档获取此值的方式。
对于此属性，ltr 和 rtl 是您唯一的选择。
如果您要查找上方、下方、左侧或右侧，请参考有关 x 和 y 位置属性的答案，因为 dir 将不是您要查找的那个。

https://github.com/angular/material2/blob/0b19b586d81feb667958152d033fd4c461a7479c/src/cdk/bidi/directionality.ts#L37

Answer 3

您可能正在寻找一种自定义菜单位置的方法。

如果是这样，您可以使用 yPosition and/or xPosition 属性来更改菜单显示的位置。

属性的含义如下：

yPosition

菜单在Y/vertical轴上的位置
有效值：above | below

示例：

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>more_vert</mat-icon>
</button>
<!-- Shows the menu above the button/trigger -->
<mat-menu yPosition="above" #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Log out</button>
</mat-menu>

xPosition

菜单在X/horizontal轴的位置
有效值：before | after

示例：

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>more_vert</mat-icon>
</button>
<!-- Shows the menu before the button/trigger -->
<mat-menu xPosition="before" #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Log out</button>
</mat-menu>

有关详细信息，请查看 docs。

我可以在 Angular Material 菜单组件上使用哪些不同的方向属性？

What are the different Direction properties I can use on an Angular Material Menu Component?

angular-material2