Angular - 访问 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 私有(private)属性，它允许我像这样访问 elementRef:

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

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

我可以将 test 指令直接放在 mat-menu 模板上，这样我就可以使用 ElementRef 注入(inject)器访问它的 elementRef ，但我会失去对 MatMenuTrigger 函数的访问权限，例如 openMenu 和 closeMenu(MatMenu 实例不持有任何对其关联的 MatMenuTrigger 的引用)。

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

Answer 1

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

@Input() menu: MatMenu;

然后在你的模板中:

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

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