主页 / 问题 / 920009
Accepted
Slavik Sazonov
Asked:2020-12-14 21:39:31 +0000 UTC2020-12-14 21:39:31 +0000 UTC

如何在 Angular 6 上向 sidenav 添加下拉元素？[关闭]

  • 772

有一个菜单https://stackblitz.com/edit/responsive-menu-angular-material-flex-layout?file=src%2Fapp%2Fapp.component.html 我需要在菜单项 2 添加下拉元素，怎么办？

angular

1 个回答

  1. Best Answer

    我建议添加这样的下拉菜单

    <a href="#" mat-button [matMenuTriggerFor]="menu">Menu Item 2</a>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voicemail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

    在app.module.ts添加 MatMenuModule

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule, MatSidenavModule, MatListModule, MatButtonModule, MatIconModule, MatMenuModule } from "@angular/material";
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

    例子

    • 0

相关问题