Angular2でダイアログサービスを作成する方法

Question

角2では、DOM操作はすべてコンポーネントまたはディレクティブによって実行されているようです。私は角度1に慣れていますが、独自のDOM要素を作成して管理する特定のサービスを持つことは合理的に一般的でした。最も顕著なのはダイアログです。

は、過去には、例えば、ユーザに約束を解決した、yesまたはnoのいずれかに押していないためのダイアログを示した0​​を返される関数 Confirm()とアンギュラ1つのサービス ConfirmationServiceを作成することが可能でした。 （例えば UI Bootstrap Modal又は NgDialog用）

これらの対話サービスは、一般$document、$compileと$parseサービスを注入することにより動作し、オンザフライでDOM要素を作成し、注入します。

私は、このようなサービスを作成するために推奨されるAngular 2アプローチが何であるかを知ることができません。可能であれば、確認を求める必要があるコンポーネントに追加する必要があるConfirmationComponentを作成しないようにしたい場合があります（部分的には、確認が必要な別のサービスでもあり、その確認は1つの例です）。これは便利です）

とにかく、いくつかの助け/ポインタは非常に高く評価されるでしょう。前もって感謝します。

Answer 1

あなたはsweetalert2への依存を取ってOKであれば、ダイアログサービスは非常に簡単になる：

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

Answer 2

私はちょうどthis link渡って走りました。私はまだ試していないが、解決策は、いつものようにコンポーネントを作成することであるように見えます、そしてそのように、そのコンポーネントを使用するサービス：

@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; 
    } 
} 

トリックからDialogComponentを参照することを確認することですあなたの主な@NgModule：

NgModule（{ 輸入：[...]、 宣言：[DialogComponennt]、 ブートストラップ：[AppComponent]、 プロバイダ：[DialogService]、 entryComponents：[DialogComponent] } ）

Answer 3

角度材には、角度のある種類の方法で動作するダイアログボックスがあり、複数の開いているダイアログをサポートしています（どうしてなぜそうはわかりません）。

https://material.angular.io/components/dialog/overview