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

Question

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

direction: Direction ：菜单的布局方向。

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

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

<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'and 'rtl'，我不得不在使用matMenuTriggerFor- 选择器的元素上使用它。

Direction在 Visual Studio Code 中声明了具有该类型的变量后，它建议我使用import { Direction } from '@angular/cdk/bidi';，并且该类型如下所示：

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

即使我发现了这一点，我也收到一条错误消息，指出

模板解析错误：无法绑定到“direction”，因为它不是“mat-menu”的已知属性。

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

Answer 1

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

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

以下是属性代表的内容：

• yPosition

  • 菜单在 Y/垂直轴上的位置
  • 有效值：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/水平轴上的位置
  • 有效值：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>
    

有关更多信息，请查看文档。

Answer 2

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

<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>

斯塔克闪电战

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

修订

mat-menucdk/bidi从这里自动导入menu-directive.ts。

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

directionality.ts在 bidi 中，如果未指定任何内容，则此行默认定义 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/directionity.ts#L37