要使用Angular Material创建菜单,可以按照以下步骤进行操作:
npm install @angular/material @angular/cdk
import { MatMenuModule } from '@angular/material/menu';
@NgModule({
imports: [
// other imports
MatMenuModule
],
// other configurations
})
export class AppModule { }
在上面的示例中,[matMenuTriggerFor]="menu"
将菜单按钮与菜单关联起来,
定义了菜单内容,定义了菜单选项。
添加子菜单:
在上面的示例中,[matMenuTriggerFor]="submenu"
将子菜单与父菜单选项关联起来,
定义了子菜单的内容。
MatMenuTrigger
来控制菜单的显示和隐藏。例如,可以使用以下代码在组件中打开菜单:import { MatMenuTrigger } from '@angular/material/menu';
@Component({
// component configurations
})
export class MyComponent {
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
openMenu() {
this.trigger.openMenu();
}
}
在上面的示例中,@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
将MatMenuTrigger
引用存储在trigger
变量中,openMenu()
方法可用于打开菜单。
希望以上解决方案能帮助到你。