垫菜单和按钮在不同的组件中 [英] mat-menu and button in different components
问题描述
我有
<mat-menu #saveMenu="matMenu">...</mat-menu>
位于应用程序保存文档组件中,并且
in app-save-document component and
<app-save-document></app-save-document>
<button mat-icon-button [matMenuTriggerFor]="saveMenu">
在另一个组件中.
如果我在不同的组件中具有[matMenuTriggerFor]的菜单和按钮,我可以做些什么来使按钮看到菜单吗?
if I have mat-menu and button with [matMenuTriggerFor] in different components, can I do something to make the button see the menu?
现在我有ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.
推荐答案
好吧,如果您想执行以下操作:
Well, if you want to do something like this:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<other-component [matMenu]="menu"></other-component>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
您可以这样编码<other-component>
:
import {Component,Input} from '@angular/core';
import {MatMenu} from '@angular/material';
@Component({
selector: 'other-component',
template: `
This button is in another component:
<button [matMenuTriggerFor]="matMenu">Click here to open menu</button>
`,
})
export class OtherComponent {
@Input() matMenu: MatMenu;
}
您可以在 stackblitz演示中看到上述示例.
You can see the above example working at this stackblitz demo.
另一种方法是(我想这就是您想要的):您的触发按钮是在父级内部(但在子级外部)并且菜单本身是在子组件中定义的.
Another approach is (I think this is what you want): your trigger button is inside the parent (but outside the child) and the menu itself is defined inside the child component.
父组件:
<button mat-button [matMenuTriggerFor]="childComponentMenu?.menu">
Menu in other component
</button>
<child-component></child-component>
export class ParentComponent {
@ViewChild(ChildComponent) childComponentMenu: ChildComponent;
}
子组件:
@Component({
selector: 'child-component',
template: `
<mat-menu>
<button mat-menu-item>Item 1 (inside other component)</button>
<button mat-menu-item>Item 2 (inside other component)</button>
</mat-menu>
`,
})
export class ChildComponent {
@ViewChild(MatMenu, {static: true}) menu: MatMenu;
}
另一种方法,类似于上述方法,但使用模板引用变量(请注意子组件装饰器中的exportAs
):
Another approach, similar to the above one, but using template reference variables (notice the exportAs
in the decorator of the child component):
父组件:
<button mat-button [matMenuTriggerFor]="x.menu">
Menu in other component
</button>
<child-component #x="menuInOtherComponent"></child-component>
export class ParentComponent {
}
子组件:
@Component({
selector: 'child-component',
template: `
<mat-menu>
<button mat-menu-item>Item 1 (inside other component)</button>
<button mat-menu-item>Item 2 (inside other component)</button>
</mat-menu>
`,
exportAs: 'menuInOtherComponent',
})
export class ChildComponent {
@ViewChild(MatMenu, {static: true}) menu: MatMenu;
}
这篇关于垫菜单和按钮在不同的组件中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!