angular - modal - ngx-bootstrap npm

ngx-bootstrap modal: ¿Cómo obtener un valor de retorno de un modal?

Question

En mi aplicación Angular 4, asumamos que estoy dentro de un servicio.

En algún momento quiero pedirle al usuario una confirmación, actualmente lo hago solo con una solicitud de confirm(...) :

const result = confirm(''Are you sure?'');

¿Qué ngx-bootstrap si en cambio me gustaría mostrar un modal ngx-bootstrap con, digamos, dos botones "Sí" o "No" y obtener un resultado similar?

EDITAR : en mi caso, resolví mi problema jugando con Temas. Here puede encontrar mi solución, en caso de que pueda ser útil para otra persona. Sin embargo, esa solución no resuelve esta pregunta, que trata de devolver un valor desde un modal, así que lo dejo abierto.

Answer 1

@ShinDarth Puede agregar esta función en su servicio y llamar a esta función cuando sea necesario.

En su Servicio, cree esta función.

    openConfirmDialogBox() {
        this.modalRef = this.modalService.show(DemoModalComponent);
        this.modalRef.content.action.take(1)
            .subscribe((value) => {
                console.log(value) // here value passed on clicking ok will be printed in console. Here true will be printed if OK is clicked
                return value;
             }, (err) => {
                 return false;
        });
    }

En su demo-modal.component.ts, cree un EventEmitter

 @Output() action = new EventEmitter();
 public onClickOK() {
    this.action.emit(true); //Can send your required data here instead of true
 }
 public onClickCANCEL() {
    this.action.emit(false); //Can send your required data here instead of true
 }

Espero que esto te ayude

Answer 2

Entiendo que la mayoría de las respuestas anteriores son completamente válidas, pero que el objetivo principal es poder invocar el diálogo de confirmación de esta manera ...

  async openModalConfirmation() {
    const result = await this.confirmationSvc.confirm(''Confirm this...'');
    if (result) {
      console.log(''Yes!'');
    } else {
      console.log(''Oh no...'');
    }
  }

Tenga en cuenta que esto es principalmente azúcar sintáctico para simplificar el uso de una promesa y las cosas asíncronas.

Creo que es lo que el OP estaba buscando y probablemente se puede volver a trabajar para admitir la devolución de cualquier otro tipo de datos (aparte de un booleano).

El resto del código a continuación (sin incluir la plantilla para hacer esto corto), es bastante sencillo.

ModalConfirmationService

import { ModalConfirmationComponent } from ''./component'';

@Injectable()
export class ModalConfirmationService {

  constructor(private bsModalService: BsModalService) {}

  confirm(message: string): Promise<boolean> {
    const modal = this.bsModalService.show(ModalConfirmationComponent, { initialState: { message: message }});

    return new Promise<boolean>((resolve, reject) => modal.content.result.subscribe((result) => resolve(result) ));
  }
}

ModalConfirmationComponent

import { Component, Input, Output, EventEmitter} from ''@angular/core'';
import { BsModalRef } from ''ngx-bootstrap/modal/bs-modal-ref.service'';
import { Subject } from ''rxjs/Subject'';

@Component({
  templateUrl: ''./component.html''
})
export class ModalConfirmationComponent {
  @Input() message: string;
  result: Subject<boolean> = new Subject<boolean>();

  constructor(public modalRef: BsModalRef) { }

  confirm(): void {
    this.result.next(true);
    this.modalRef.hide();
  }

  decline(): void {
    this.result.next(false);
    this.modalRef.hide();
  }
}

Answer 3

Intenta con la siguiente opción que está trabajando para mí. callbackOnModelWindowClose es el valor de retorno.

@Output() callbackOnModelWindowClose: EventEmitter<null> = new EventEmitter();

const initialState = {
          isModelWindowView: true, bodyStyle: ''row'', gridDataList: this.scheduleList
        };

this.modalRef = this.modalService.show(YourComponent,
          Object.assign({}, this.modalConfig, { class: ''modal-dialog-centered'', initialState });

this.modalRef.content.callbackOnModelWindowClose.take(1).subscribe(() => {
            your code here..
          });

Answer 4

Prueba de esta manera:

mi ejemplo está funcionando correctamente Espero que esto te ayudará

home.module.ts

import { ModalModule } from ''ngx-bootstrap'';

@NgModule({
    imports: [
        ModalModule.forRoot()
    ]
})

home.component.html

<button class="btn btn-primary" (click)="openConfirmDialog()">Open Confirm box</button>

home.component.ts

import { BsModalService } from ''ngx-bootstrap/modal'';
import { BsModalRef } from ''ngx-bootstrap/modal/modal-options.class'';

export class HomeComponent {
    public modalRef: BsModalRef;
    constructor(
        private homeService: HomeService,
        private modalService: BsModalService
    ) { }

    openConfirmDialog() {
        this.modalRef = this.modalService.show(HomeModalComponent);
        this.modalRef.content.onClose.subscribe(result => {
            console.log(''results'', result);
        })
    }
}

home-modal.component.html

<div class="alert-box">
    <div class="modal-header">
        <h4 class="modal-title">Confirm</h4>
        <button type="button" class="close" aria-label="Close" (click)="bsModalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        Are you sure want to delete this node?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onConfirm()">Yes</button>
        <button type="button" class="btn btn-secondary" (click)="onCancel()">No</button>        
    </div>
</div>

home-modal.component.ts

import { Subject } from ''rxjs/Subject'';
import { BsModalRef } from ''ngx-bootstrap/modal'';

export class HomeModalComponent {

    public onClose: Subject<boolean>;

    constructor(private _bsModalRef: BsModalRef) {

    }

    public ngOnInit(): void {
        this.onClose = new Subject();
    }

    public onConfirm(): void {
        this.onClose.next(true);
        this._bsModalRef.hide();
    }

    public onCancel(): void {
        this.onClose.next(false);
        this._bsModalRef.hide();
    }
}

Answer 5

Usé la solución de @Chandru, sin embargo, para devolver un true o false , en lugar de:

openConfirmDialog() {
    this.modalRef = this.modalService.show(HomeModalComponent);
    this.modalRef.content.onClose.subscribe(result => {
        console.log(''results'', result);
    })
}

Simplemente utilicé

openConfirmDialog() {
    this.modalRef = this.modalService.show(HomeModalComponent);
    return this.modalRef.content.onClose;
}