угловой - разделить модальные по всем компонентам - PullRequest
Новая
       14

угловой - разделить модальные по всем компонентам

0 голосов
/ 06 июля 2018

Я пытаюсь реализовать пользовательские функции подтверждения диалога , которые планируется сделать доступными для всего приложения - для всех компонентов.

Для этого я использую Angular Material.

Модал - это отдельный компонент, который я определяю в другом компоненте следующим образом: 

const dialogRef = this.confirmDialog.open(ConfirmDialogComponent, ... });

Проблема, с которой я сталкиваюсь - , при таком подходе мне приходится дублировать код в каждом компоненте . DRY principle нарушено.

Для более подробной информации: 

...
export class SearchComponent extends AppComponentBase {...

    constructor(public confirmDialog: MatDialog, ...) { super(injector); }

    confirm(title: string, message: string) {
        var promise = new Promise((resolve, reject) => {

            const dialogRef = this.confirmDialog.open(ConfirmDialogComponent, {
                width: '250px',
                data: { title: title, message: message }
            });

            dialogRef.afterClosed().subscribe(result => {
                if (result) {
                    resolve();
                } else {
                    reject();
                }
            });
        });
        return promise;
    }

Очевидно, я мог бы переместить общий код в базовый компонент - AppComponentBase. Хотя все еще будут биты дублированного кода - например, код, связанный с конструктором.

Но есть ли лучший / более чистый подход с точки зрения разработки программного обеспечения Реорганизовать то, что у меня есть?

Спасибо.

1 Ответ

0 голосов
/ 06 июля 2018

Для рабочего примера StackBlitz

Поместите это в папку / shared или / services на корневом уровне.

Услуга: 

import { Observable } from 'rxjs';
import { MessagesComponent } from './messages.component';
import { MatDialogRef, MatDialog } from '@angular/material';
import { Injectable } from '@angular/core';

@Injectable()
export class MessagesService {

  dialogRef: MatDialogRef<MessagesComponent>;

  constructor(private dialog: MatDialog) { }

  public openDialog(title: string, message: string): Observable<any> {
    this.dialogRef = this.dialog.open(MessagesComponent);
    this.dialogRef.componentInstance.title = title;
    this.dialogRef.componentInstance.message = message;

    return this.dialogRef.afterClosed();

    // Nothing can live after afterClosed.
  }
}

Component.ts 

import { Component, OnInit } from '@angular/core';

import { MatDialogRef } from '@angular/material';


@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html'
})
export class MessagesComponent implements OnInit {

  public title: string;
  public message: string;


  constructor(
    private dialogRef: MatDialogRef<MessagesComponent>,
  ) { }


  private closeWithTimer() {
    setTimeout (() => {
      this.dialogRef.close();
    }, 2000);
  }


  ngOnInit() {
    this.closeWithTimer();
  }
}

HTML: 

<h1 mat-dialog-title>{{title}}!</h1>
<div mat-dialog-content>{{message}}</div>

Вызов из какого-то компонента в вашей вселенной: 

constructor(
    private httpService: HttpService,
    public dialogRef: MatDialogRef<AddMemberComponent>,  // Used by the html component.
    private messagesService: MessagesService,
    public formErrorsService: FormErrorsService
  ) { }

this.httpService.addRecord(this.membersUrl, enteredData)
      .subscribe(
        res => {
          this.success();
        },
        (err: HttpErrorResponse) => {
          console.log(err.error);
          console.log(err.message);
          this.handleError(err);
        }
      );

В нижней части этого компонента ts: 

  private success() {
    this.messagesService.openDialog('Success', 'Database updated as you wished!');
  }

  private handleError(error) {
    this.messagesService.openDialog('Error addm1', 'Please check your Internet connection.');
  }
...