时间戳

首页 > 解决方案 > Angular - 访问 MatMenu 的 elementRef

angular - Angular - 访问 MatMenu 的 elementRef

问题描述

我有以下设置：

@Directive({
    selector: '[test]'
})
export class Test {
    constructor(
        private hostRef: ElementRef,
        private host: MatMenuTrigger,
    ) {}

    ngOnInit() {
        this.host.menuOpened.subscribe(() => {
            /* Do something with the MatMenu elementRef */
        });
    }
}

<a [matMenuTriggerFor]="aMenu" test></a>
<mat-menu #aMenu></mat-menu>

我想获取 MatMenu 的 ElementRef（不是对打开的 MatMenu 组件的引用，也不是 MatMenuTrigger 的 elementRef）。在查看了 MatMenu 类的 typescript 定义文件后，我发现了_elementRef允许我访问 elementRef 的私有属性，如下所示：

this.host.menuOpened.subscribe(() => {
    const ref = (this.host.menu as any)._elementRef;
    /* Do something with ref */
});

唯一的问题是，这依赖于 Angular 团队在未来版本中维护这个属性（而且，事实上，这是一个私有属性开始的事实）。

我可以将test指令直接放在mat-menu模板上，这将允许我使用注入器访问它的 elementRef ElementRef，但我会失去对 MatMenuTrigger 函数的访问，例如openMenu和closeMenu（MatMenu 实例不包含对其任何关联的 MatMenuTrigger 的任何引用） .

有没有办法在不使用其私有属性的情况下访问 MatMenu 的 ElementRef（或者在不访问关联的 MatMenuTrigger 的情况下关闭 MatMenu 的方法）？
我需要 ElementRef 来测试点击是否document来自菜单（通过测试菜单 elementRef 是否包含在事件composedPath中）

标签： angularangular-material

解决方案

听起来您正在尝试将对mat-menu元素的引用传递给您的test指令。如果是这种情况，请尝试Input()在指令中添加一个：

@Input() menu: MatMenu;

然后在您的模板中：

<a [matMenuTriggerFor]="aMenu" test [menuRef]="aMenu"></a>
<mat-menu #aMenu></mat-menu>

这样，您可以通过本地引用将组件传递给您的指令。

推荐阅读