我是 Angular 的新手,对服务有疑问。在过去使用其他语言时,我会创建可以从应用程序中的任何位置调用的自包含组件。
我需要以模态方式显示弹出对话框和错误消息,可以从不同的服务或组件的 ts 文件中调用。
我的最终目标是不要在多个组件中使用 HTML 对话框,而是在单个服务或组件和服务中。
我最初的想法是提供一个完全自包含的模板和样式部分(如果这些在服务中可用)的服务,或者如果这不可行,则提供一个带有对话框方法的服务以及包含标记和样式的单独组件。
我在想的是以下两个想法之一: 1. 具有显示对话框或错误消息所需的 html、样式和方法的服务 2. 服务和组件一起工作来显示对话框
我是按照这种思路走在正确的道路上,还是在考虑做一些会伤害我的事情?
最佳答案
使用服务来封装 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 */ }
}
对话框配置文件选项.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>
关于来自服务的 Angular 7 模态对话框/弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57363522/