来自服务的 Angular 7 模态对话框/弹出窗口

Question

我是 Angular 新手，对服务有疑问。过去在其他语言中，我会创建自包含的组件，可以从应用程序的任何位置调用。

我需要以模态方式显示的弹出对话框和错误消息，可以从不同的服务或组件的 ts 文件调用。

我的最终目标是不在多个组件中包含对话框的 HTML，而是在单个服务或组件和服务中。

我最初的想法是类似于带有模板和样式部分（如果这些在服务中可用）的服务，它是完全独立的，或者如果这不可行，那么带有对话框方法的服务以及一个包含标记和样式的单独组件。

我在想的是以下两个想法之一： 1. 具有显示对话框或错误消息所需的 html、样式和方法的服务 2. 一个服务和组件一起工作以显示对话框

我是按照这种思路走在正确的道路上，还是在考虑做一些会咬我的事情？

Answer 1

使用 Service 封装 Angular 对话逻辑是一个不错的方法。利用Angular Material Dialog，您可以创建如下服务。

对话服务

import { ElementRef, Injectable } from '@angular/core'
import { MatDialog, MatDialogRef } from '@angular/material'

import { DialogProfileOptionsComponent } from './dialog-profile-options/dialog-profile-options.component'
import { DialogYesNoComponent } from './dialog-yes-no/dialog-yes-no.component'


@Injectable({
  providedIn: 'root'
})
export class DialogService {

  constructor(public dialog: MatDialog) { }

  public open_info_dialog() { }

  public open_profile_options_dialog({ position_relative_to_element, user,
    has_backdrop = false, height = '135px', width = '290px' }:
    {
      position_relative_to_element: ElementRef, user: firebase.User, has_backdrop?: boolean,
      height?: string, width?: string
    }): MatDialogRef<DialogProfileOptionsComponent> {

    const dialog_ref: MatDialogRef<DialogProfileOptionsComponent> =
      this.dialog.open(DialogProfileOptionsComponent, {
        hasBackdrop: has_backdrop,
        height: height,
        width: width,
        data: { position_relative_to_element: position_relative_to_element, user: user }
      })
    return dialog_ref
  }

  public open_yes_no_dialog({ question, title = 'Confirm', yes_button_first = true,
    has_backdrop = false, height = '250px', width = '350px' }:
    {
      question: string, title?: string, yes_button_first?: boolean, has_backdrop?: boolean,
      height?: string, width?: string
    }): MatDialogRef<DialogYesNoComponent> {

    const dialog_ref = this.dialog.open(DialogYesNoComponent, {
      autoFocus: true,
      backdropClass: 'cdk-overlay-transparent-backdrop',
      closeOnNavigation: true,
      disableClose: false,
      hasBackdrop: has_backdrop,
      height: height,
      width: width,
      data: { question: question, title: title, yes_button_first: yes_button_first }
    })

    return dialog_ref
  }

  open_warning_dialog() { /* TODO  */ }
}

dialog-profile-options.component.ts

import { Component, ElementRef, Inject, OnInit } from '@angular/core'
import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'


@Component({
  selector: 'dialog-profile-options',
  templateUrl: './dialog-profile-options.component.html',
  styleUrls: ['./dialog-profile-options.component.css']
})
export class DialogProfileOptionsComponent implements OnInit {
  private position_relative_to_element: ElementRef

  constructor(public dialog_ref: MatDialogRef<DialogProfileOptionsComponent>,
    @Inject(MAT_DIALOG_DATA) public options: { position_relative_to_element: ElementRef,
      user: firebase.User }) {

    this.position_relative_to_element = options.position_relative_to_element
  }

  ngOnInit() {
    const mat_dialog_config = new MatDialogConfig()
    const rect: DOMRect = this.position_relative_to_element.nativeElement.getBoundingClientRect()

    mat_dialog_config.position = { right: `10px`, top: `${rect.bottom + 2}px` }
    this.dialog_ref.updatePosition(mat_dialog_config.position)
  }

}

dialog-profile-options.component.html

<div mat-dialog-content>
  <div><b>{{options.user.displayName}}</b></div>
  <div class="text-secondary">{{options.user.email}}</div>
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close="view-profile" cdkFocusInitial>View profile</button>
  <button mat-button mat-dialog-close="sign-out">Sign out</button>
</div>