Angular2에서 Dialog 서비스를 작성하는 방법

Question

Angular 2에서는 모든 DOM 조작이 구성 요소 나 지시문에 의해 수행되는 것처럼 보입니다. 나는 앵귤러 1에 익숙하지만, 자신의 DOM 요소를 만들고 관리하는 특정 서비스를 갖는 것은 합리적입니다. 가장 주목할만한 대화입니다.

는 과거에는 예를 들어 사용자에게 약속을 해결하는 하나 예 또는 아니오에 누르지 할 수있는 대화 상자를 보여 주 Promise<bool>를 반환하는 기능 Confirm()와 각도 (1 개) 서비스 ConfirmationService을 만들 수 있었다.

이러한 대화 서비스 일반적 $document, $compile$parse 및 서비스를 주입하여 작동 작성하고 즉시 DOM 요소를 주입 (예 UI Bootstrap Modal 또는 NgDialog)입니다.

권장되는 Angular 2 방식이 이러한 서비스를 만드는 데 어려움을 겪고 있습니다. 가능하다면 확인을 요청할 필요가있는 구성 요소에 추가해야하는 ConfirmationComponent을 만들지 않으려는 경우 (부분적으로 확인을 필요로하는 다른 서비스 일 수도 있고 확인이 한 가지 예일 수 있기 때문에) 유용한 정보입니다.)

어쨌든 일부 도움말/포인터를 크게 평가하겠습니다. 미리 감사드립니다. 당신이 sweetalert2에 대한 종속성을 복용 확인을 경우

Answer 1

는 대화 서비스는 아주 간단하게 :

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