是否可以将角度组件中的html元素设置为动态创建的组件的子项,以便打开MAT-Menu?
我正在尝试实现How to open mat-menu from button click of a dynamically created open layers custom control?
中描述的情况因此,我想为需要动态创建的开放层自定义控件添加MAT-Menu Open。在原始问题中有一个好的答案,我无法使用,因为我没有地图创建代码的控制权。
所以我有一个带有HTML的棱角PopUpMenuComponent(app-Popup-MenuComponent):
<div id="mat-menu-opener" [matMenuTriggerFor]="menu"></div>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
在app.Component.html中,我只有我无法控制的第三方地图组件和弹出菜单组件:
<app-map-openlayers></app-map-openlayers>
<app-popup-menu></app-popup-menu>
在app.Component.ts我要打开的自定义控件我尝试使用以下mat菜单:
private createMenuButtonElement(): HTMLElement {
const element = document.createElement('div');
element.className = `ol-control button menu-opener`;
const popUpOpener = document.getElementById('mat-menu-opener');
if (popUpOpener !== null) {
element.appendChild(popUpOpener);
}
return element;
}
所以我将div-元素移动到自定义控件的子控件。移动起作用了,但当我单击该控件时,菜单不会打开。当我签入开发人员工具的元素选项卡时,div元素看起来正常,但mat菜单不正常。
<div class="ol-control button popup-menu-button" data-automation-id="mapBtn" title="">
<div _ngcontent-ng-cli-universal-c213="" aria-haspopup="true" id="mat-menu-opener" class="mat-menu-trigger" ng-reflect-menu="[object Object]"></div>
</div>
页面中有MAT-Menu元素,但其中没有按钮:
<app-popup-menu _ngcontent-ng-cli-universal-c360=""></app-popup-menu>
问题是:可以这样做吗?
解决方案
捕获MatMenuTrigger
作为视图子对象,并在createMenuButtonElement
函数中使用它来切换、打开或关闭菜单。
<div id="mat-menu-opener" #trig="matMenuTrigger" [matMenuTriggerFor]="menu"></div>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<app-map-openlayers></app-map-openlayers>
@ViewChild('trig') menuTrigger: MatMenuTrigger;
private createMenuButtonElement(): HTMLElement {
const element = document.createElement('div');
element.className = `ol-control button menu-opener`;
element.addEventListener('click', () => {
this.menuTrigger.toggleMenu();
});
return element;
}
相关文章