Создание диалоговых окон на Angular Material

23 июля, 2022 12:26 пп 197 views | Комментариев нет

| | Комментировать запись

В Angular Material существует множество доступных компонентов, и диалоговые окна – самые сложные из них.

В этом мануале мы создадим простое диалоговое окно, которое предложит пользователям выбрать эмодзи.

Сначала вы должны убедиться, что Angular Material правильно настроен для разработки вашего проекта. Кроме того, предполагается, что у вас есть проект, запущенный с помощью Angular CLI.

Читайте также:

Компоненты для диалоговых окон

В Angular Material диалоговые окна являются отдельными компонентами, поэтому нашим первым шагом будет создание компонента. В Angular CLI можно запустить следующее:

$ ng g component choose-emoji-dialog

Импорт компонента диалогового окна

Затем нужно импортировать компонент диалогового окна в модуль вашего приложения и в компонент, который будет его вызывать. Также компонент нужно добавить в объявления и входные компоненты внутри модуля приложения (app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';

Импорт и инъекция MdDialog

Внутри главного компонента приложения (app.component.ts, который и вызывает диалоговое окно) мы должны импортировать MdDialog и инжектировать его в конструктор класса:

import { Component } from '@angular/core';
import { ChooseEmojiDialogComponent }
  from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MdDialog } from '@angular/material';

@Component({
  selector: 'app-root',
  template: <h1>Your Emoji</h1>
    <div *ngIf="selectedEmoji">{{ selectedEmoji }}</div>
    <button mat-raised-button (click)="openEmojiDialog()">
      Make a selection
    </button>,
  styles: [div {
    padding: 1rem;
  }]
})
export class AppComponent {
  selectedEmoji: string;
  constructor(public dialog: MdDialog) {}
  openEmojiDialog() {
    let dialog = this.dialog.open(ChooseEmojiDialogComponent);
dialog.afterClosed()
  .subscribe(selection => {
    if (selection) {
      this.selectedEmoji = selection;
    } else {
      // User clicked 'Cancel' or clicked outside the dialog
    }
  });

Пара примечаний:

  • Мы открываем диалоговое окно, вызывая open для внедренного экземпляра MdDialog и передавая компонент диалогового окна.
  • Мы получаем данные из диалогового окна, подписавшись на наблюдаемый объект, который возвращает afterClosed, и извлекая данные.

Стилизация диалогового окна

Данный компонент довольно прост, и Angular Material предоставляет нам несколько директив, помогающих стилизовать его элементы. Вот разметка шаблона (choose-emoji-dialog.html):

<h1 mat-dialog-title>Choose Your Destiny:</h1>

<div mat-dialog-content>
  <mat-select [(ngModel)]="choosenEmoji">
    <mat-option *ngFor="let emoji of emojis" [value]="emoji">
      {{ emoji }}
    </mat-option>
  </mat-select>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="confirmSelection()" color="primary">
    Okays!
  </button>
  <button mat-button (click)="dialogRef.close()">
    Cancel
  </button>
</div>

Обратите внимание на несколько специальных директив, которые мы использовали: mat-dialog-title, mat-dialog-content и mat-dialog-actions.

Чтобы кнопки действий в диалоговом окне работали правильно, необходимо импортировать MdDialogRef и внедрить его в конструктор, чтобы создать ссылку на диалоговое окно (choose-emoji-dialog.component.ts):

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'app-choose-emoji-dialog',
  templateUrl: './choose-emoji-dialog.component.html'
})
export class ChooseEmojiDialogComponent {
  emojis = ['🐼', '💪', '🐷', '🤖', '👽', '🐥'];
  choosenEmoji: string;
  constructor(public dialogRef: MdDialogRef<ChooseEmojiDialogComponent>) { }
  confirmSelection() {
    this.dialogRef.close(this.choosenEmoji);
  }

Метод confirmSelection закрывает диалоговое окно, а также возвращает нужные нам данные.

В итоге у нас есть красивое диалоговое окно Material Design:

Tags: ,

Добавить комментарий