Javascript 如何在Angular2中创建对话服务

在Angular 2中，似乎所有DOM操作都是由组件或指令执行的。我已经习惯了Angular 1，但是在其中，创建和管理自己的DOM元素的某些服务是相当常见的；最明显的是对话

例如，在过去，可以创建Angular 1 service ConfirmationService，该服务带有一个函数Confirm，该函数返回一个承诺，向用户显示一个按yes或no打开的对话框，从而解决了该承诺

例如，这些对话服务或通常通过注入$document、$compile和$parse服务以及动态创建和注入DOM元素来工作

我很难找到创建此类服务的推荐Angular 2方法。如果可能的话，我希望避免创建一个必须添加到任何需要请求确认的组件中的确认组件，部分原因是它也可能是另一个需要确认的服务，而确认只是一个有用的示例

---

无论如何，如果您能提供一些帮助/建议，我们将不胜感激。提前感谢。

如果您可以依赖，对话服务将变得非常简单：

import { Injectable } from '@angular/core';
import { default as swal } from 'sweetalert2';

@Injectable()
export class DialogService {
    confirm(title: string, message: string) {
        return swal({
            title: title,
            text: message,
            type: 'warning',
            showCancelButton: true
        });
    };
}

我只是跑过去。虽然我还没有尝试过，但解决方案似乎是像往常一样创建一个组件，以及一个使用该组件的服务，如下所示：

@Injectable()
export class DialogService {  
  constructor(private modalService: NgbModal) {}

  public confirm() {
    const modalRef = this.modalService.open(DialogComponent);
    modalRef.componentInstance.name = "Discard Changes?";
    modalRef.componentInstance.message = "Are you sure you want to discard your changes?";
    modalRef.componentInstance.changeRef.markForCheck();
    return modalRef.result;
  }
}

诀窍是确保从主@NgModule引用DialogComponent：

@NgModule({
  imports: [...], 
  declarations: [ DialogComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ DialogService],
  entryComponents: [DialogComponent]
})

---

“Angular Material”有一个对话框，它以“Angular”类型的方式工作，支持多个打开的对话框，不知道为什么，但它确实支持

dialog-form.component.ts dialog-form.component.html

---

也许看看这个模式实现会对您有所帮助。不幸的是，他们的解决方案是创建一个指令，因此需要您将模式的html添加到使用它的组件中，这意味着在标准对话框（如确认对话框）的情况下会有大量重复。这个怎么样？它的实现有点满足您的需要。我看了一下，但ionic是一个巨大的框架。我试图弄清楚到底是什么，但对于一个相对较新的Angular 2开发人员来说，很难弄清楚到底发生了什么。。。不管怎样谢谢你，我的问题很好。我一直在想同样的事情！！从早期的阿尔法开始，我就一直在Angular 2工作……谢谢你的解决方案。我对这个组件非常着迷。实际上，我用了一种反应式的角度来显示对话框。组成部分这只是DialogsFormService调用位置的视图。

import { Observable } from 'rxjs/Rx';
import { DialogsFormComponent } from  './dialogs-form.component';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Injectable() 
exprt class DialogsFormService {
constructor(private dialog: MatDialog, private fb: FormBuilder) { }
public config(title: string, fields: any, formGroup: any): Observable<boolean> {
let dialogRef: MatDialogRef<DialogsFormComponent>;
dialogRef = this.dialog.open(DialogsFormComponent, { width: '600px
'});
if (formGroup instanceof FormGroup) {
dialogRef.componentInstance.modalForm = formGroup;
} else {
dialogRef.componentInstance.modalForm = this.fb.group(formGroup);
}
dialogRef.componentInstance.title = title;
dialogRef.componentInstance.fields = fields;
return dialogRef.afterClosed();
}
}

import { Validators } from '@angular/forms';

export class YourComponent {
constructor (private dialogsFormService: DialogFormService) {}
openDialog() {
const title =  'Your Title';
const type = 'your type you can control on dialog html';
const fields = dialogFieldOptions;
const formGroup = {
prority:['', Validators.required ],
type: ['', Validators.required ],
message: ['', Validators.required]
};
this.dialogsFormService.confirm(title, fields, formGroup)
.subscribe((res) => {
if (response != undefined) {
// do some things
}
});
}
}
const dialogFieldOptions = [
{
'label': 'you lable',
'type': 'radio',
'name': 'your name',
'option': ['option1', 'option2'],
'required': true;
}
];

import { component, Inject } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { FormGroup } from '@angular/forms';
@Component({ templateUrl:'./dialogs-form.component.html'})
export class DialogsFormComponent {
public title: string;
public fields: any;
public modalForm: any;
private markFormAsTouched (formGroup: FormGroup) {
(<any>Object).values(formGroup.constrols).forEach(control => {
control.markAsTouched();
if (control.controls) {
this.markFormAsTouched(control);
}
});
}
constructor(public dialogRef: MatDialogRef<DialogsFormComponent>) { }
onSubmit(mForm, dialog) {
if (mForm.valid) {
dialog.close(mForm.value);
} else {
this.markFormAsTouched(mForm);
}
}
}

<form (ngSubmit) = "onSubmit(modelForm, dialogRef)" [formGroup]= "modalForm">
<mat-dialog-content>
<selection *ngIf = "field.type ==== 'radio'">
<label> field.label</label>
<mat-radio-group formControlName="field.name" required = "field.required">
<mat-radio-button *ngFor="let option of field.options" [value]= "option">
{{option}}</mat-radio-button>
</mat-radio-group>
</selection>
</mat-dialog-content>
<mat-dialog-actions>
<button type="button" mat-raised-button (click)="dialogRef.close()"> Cancle</button>
<button type="submit" mat-raised-button> Submit</button>
</mat-dialog-actions>
</form>