Угловой материал 7 - Меню
В <mat-menu>, угловая директива, используется для создания меню и присоединения к нему элемента управления со стилем материального дизайна и возможностями анимации.
В этой главе мы продемонстрируем конфигурацию, необходимую для рисования элемента управления меню с использованием Angular Material.
Создать приложение Angular
Выполните следующие шаги, чтобы обновить приложение Angular, которое мы создали в Angular 6 - Глава Настройка проекта -
Шаг | Описание |
---|---|
1 | Создайте проект с именем materialApp, как описано в главе Angular 6 - Project Setup . |
2 | Измените app.module.ts , app.component.ts , app.component.css и app.component.html, как описано ниже. Остальные файлы оставьте без изменений. |
3 | Скомпилируйте и запустите приложение, чтобы проверить результат реализованной логики. |
Ниже приводится содержание измененного дескриптора модуля. app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatMenuModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatMenuModule, MatButtonModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Ниже приводится содержимое измененного файла хоста HTML. app.component.html.
<button mat-button [matMenuTriggerFor] = "menu">File</button>
<mat-menu #menu = "matMenu">
<button mat-menu-item>New</button>
<button mat-menu-item>Open</button>
<button mat-menu-item [matMenuTriggerFor] = "recent">Recent</button>
</mat-menu>
<mat-menu #recent = "matMenu">
<button mat-menu-item>File 1</button>
<button mat-menu-item>File 2</button>
</mat-menu>
Результат
Проверьте результат.
Детали
Сначала мы создали два меню с помощью mat-menu и привязываем их к кнопкам с помощью matMenuTriggerFor.
matMenuTriggerFor передается идентификатор меню для присоединения меню.