Angular 角度7模式对话框/服务弹出窗口

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

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

我的最终目标不是将对话框的HTML放在多个组件中，而是放在单个服务或组件&服务中

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

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

---

我的思路是否正确，或者我是否在考虑做一些会伤害我的事情？

使用服务封装角度对话框逻辑是一个很好的方法。利用这一点，您可以创建如下服务

对话服务

从'@angular/core'导入{ElementRef，Injectable}
从“@angular/material”导入{MatDialog，MatDialogRef}
从“./dialog profile options/dialog profile options.component”导入{dialogprofileoptions}
从“./dialog yes no/dialog-yes-no.component”导入{DialogYesNoComponent}
@注射的({
providedIn:'根'
})
导出类对话框服务{
构造函数（公共对话框：MatDialog）{}
公共打开信息对话框（）{}
公共打开配置文件选项对话框（{相对于元素的位置，用户，
has_background=false，height=135px，width=290px}：
{
相对于元素的位置：ElementRef，用户：firebase.user，具有背景？：布尔，
高度？：字符串，宽度？：字符串
})：MatDialogRef{
const dialog\u ref:MatDialogRef=
this.dialog.open（DialogProfileOptionsComponent{
HasBackground:has_background，
高度:高度,，
宽度：宽度，
数据：{position_relative_to_元素：position_relative_to_元素，user:user}
})
返回对话框\u ref
}
公开打开是否对话框（{问题，标题='Confirm'，是按钮\u first=true，
has_background=false，高度=250px，宽度=350px}：
{
问题：字符串，标题？：字符串，是按钮\u优先？：布尔，有背景？：布尔，
高度？：字符串，宽度？：字符串
})：MatDialogRef{
const dialog\u ref=this.dialog.open（DialogYesNoComponent{
自动对焦：对，
backdropClass:“cdk覆盖透明背景”，
closeOnNavigation：正确，
disableClose:false，
HasBackground:has_background，
高度:高度,，
宽度：宽度，
数据：{问题：问题，标题：标题，是按钮首先：是按钮首先}
})
返回对话框\u ref
}
打开警告对话框（）{/*TODO*/}
}

dialog-profile-options.component.ts

从'@angular/core'导入{Component，ElementRef，Inject，OnInit}
从“@angular/material/DIALOG”导入{MatDialogConfig，MatDialogRef，MAT_DIALOG_DATA}
@组成部分({
选择器：“对话框配置文件选项”，
templateUrl:'./对话框配置文件选项.component.html'，
样式URL:['./对话框配置文件选项.component.css']
})
导出类对话框ProfileOptions组件实现OnInit{
相对于元素的私有位置：ElementRef
构造函数（公共对话框\u ref:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共选项：{position_relative_to_element:ElementRef，
用户：firebase.user}）{
this.position\u relative\u to\u元素=options.position\u relative\u to\u元素
}
恩戈尼尼特（）{
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\u ref.updatePosition（mat\u dialog\u config.position）
}
}

dialog-profile-options.component.html

{{options.user.displayName}
{{options.user.email}
视图配置文件
退出

Use Angle Material对话框您可以扩展它，并将其用作其他组件之间的服务，您可以在其网站上找到更多示例@Christoper，谢谢，我正试图避免任何额外的依赖项，如素描或材质，但我认为我可以将您发布的内容与html/css模板和服务结合使用。

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  */ }
}

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)
  }

}

<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>