我可以在"角度材质"菜单组件上使用哪些不同的"方向"特性

Question

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

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

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

我尝试了以下操作，但我不确定可以在direction-属性中放入哪些值。我想我可以使用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'和'rtl'，并且我必须在使用matMenuTriggerFor选择器的元素上使用它。

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

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

尽管我发现了这个，但我收到了一个错误，说明

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

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

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将从父容器继承dir属性，而不导入cdk。。。请注意父div 上的dir="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-esample.html

修订

CCD_ 27自动从这里的CCD_ 29导入CCD_。

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

• 在查看超链接时，还请注意这行代码上方的行。。。因为这就是CCD_ 31从父容器或全局文档获取该值的方式
• 对于此属性，ltr和rtl是您唯一的选项
• 如果您在上面、下面、左边或右边寻找，请参考关于x和y位置属性的答案，因为dir不是您要寻找的

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

Answer 3

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

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

更多详细信息请参见API文档。