我有以下设置:
@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 )
最佳答案
听起来您正试图将对 mat-menu
元素的引用传递给您的 test
指令。如果是这种情况,请尝试将 Input()
添加到指令中:
@Input() menu: MatMenu;
然后在你的模板中:
<a [matMenuTriggerFor]="aMenu" test [menuRef]="aMenu"></a>
<mat-menu #aMenu></mat-menu>
这样,您就可以通过本地引用将组件传递给您的指令。
关于Angular - 访问 MatMenu 的 elementRef,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68486676/