MatMenu的角度访问elementRef

Question

我有以下设置：

@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团队在未来的版本中维护这个属性(以及，好吧，这是一个私有属性的事实)。

有没有办法在不使用私有属性的情况下访问MatMenu的ElementRef (或者有办法在不访问相关MatMenuTrigger的情况下关闭MatMenu )？

我需要ElementRef来测试document上的点击是否来自菜单(通过测试菜单elementRef是否包含在event composedPath中)

Answer 1

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

@Input() menu: MatMenu;

然后在您的模板中：

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

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