我有以下设置:
@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>
这样,您就可以通过本地引用将组件传递给您的指令。
https://stackoverflow.com/questions/68486676/
相关文章:
java - Spring boot 从附加位置文件覆盖 prod 属性
react-native - 升级到 npm7 但库中断太多
reactjs - React Signalr 访问状态变量
vue.js - 如何配置 Vite 来解析嵌套的 SFC CSS url
android - 尝试在真实手机上启动应用程序时,Expo 卡在无休止的加载屏幕上
amazon-s3 - 从 Lambda 函数生成预签名 S3 URL 时为 "Access key
rust - 为什么 Iterator::filter 方法接受一个可变引用作为 self?