Angular 5 Bootstrap Dialog, отправка запросов несколько раз - PullRequest
Новая
       11

Angular 5 Bootstrap Dialog, отправка запросов несколько раз

0 голосов
/ 16 мая 2018

Редактировать: это было исправлено. Я просто переместил свой код подписки в конструктор, и он работал как шарм.

Я попытался сделать мои компоненты подтверждения динамическими и создал что-то вроде этого. Мой МодалСервис: 

    @Injectable()
    export class ModalService {
      bsModalRef: BsModalRef;
      constructor(private modalService: BsModalService) {}

      openModalWithComponent(title:string, message:string) {
        const initialState = {
          message:message,
          title:title,
          closeBtnName: 'Close'
        };
        debugger;
        this.bsModalRef = this.modalService.show(AlertComponent, {initialState});

     this.modalService.onHide.subscribe(()=>{
       console.log('the message is now: ', this.bsModalRef.content.message);
        });

      }
callback;
      openConfirmComponent(title:string, message:string, callback) {
    const initialState = {
      message:message,
      title:title,
      result:false
    };
    debugger;
    this.callback = callback;
    this.bsModalRef = this.modalService.show(ConfirmComponent, {initialState});
    var that  = this;
    this.modalService.onHide.subscribe(()=>{
        console.log('calling callback from confirm');
        callback(that.bsModalRef.content.result);
    });
  }

Код подтверждения: 

import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

export interface ConfirmModel {
    title: string;
    message: string;

}

@Component({
    selector: 'confirm-component',
    templateUrl: '../views/ConfirmComponent.html'

})
export class ConfirmComponent implements ConfirmModel {
    title: string;
    message: string;
    result:boolean  = false;
  constructor(public bsModalRef: BsModalRef) {       
}
    confirm() {
        // on click on confirm button we set dialog result as true,
        // ten we can get dialog result from caller code
        this.result = true;
        this.bsModalRef.hide();

    }


    cancel() {
        this.result = false;
        this.bsModalRef.hide();
        this.bsModalRef.content.ok = false;
    }
}

Использование выглядит так: 

this.dialogService.openConfirmComponent('Are you sure?', 'Would you like to save the selected shape?', function(result){
            if(result){
                console.log('emiting');
                that.SaveShape.emit();
            }
        });

Теперь, когда я нажимаю кнопку «Сохранить» в моем компоненте, он вызывает компонент подтверждения, а если пользователь нажимает «Да», то он генерирует событие. Теперь эта строка: 

this.modalService.onHide.subscribe(()=>{
            console.log('calling callback from confirm');
            callback(that.bsModalRef.content.result);
        });

Он подписывается на событие onhide и, как только он скрывается, запускает обратный вызов. Проблема в том, что он подписан несколько раз. Я нажимаю первый раз, он срабатывает один раз. Я нажимаю второй раз, он срабатывает дважды. Как я могу остановить это? Я думаю, мне нужно как-то отписаться? Я знаю, что это должно быть довольно простой вещью, которую мне не хватает Помощь

1 Ответ

0 голосов
/ 26 ноября 2018 
import { Subscription } from 'rxjs';

subscriptions: Subscription[] = [];

addRole() {
        this.addRoleRef = this.modalService.show(AddComponent, { backdrop: 'static' });
        this.subscriptions.push(
            this.modalService.onHide.subscribe((reason: string) => {
                this.getRoles();
                this.unsubscribe();
            })
        );
}

unsubscribe() {
        this.subscriptions[0].unsubscribe();
        this.subscriptions = [];
}

Если мы не отменим подписку, экземпляр модального сервиса не будет очищен.И поэтому вызывается несколько запросов.

Попробуйте использовать метод отказа от подписки, который мне помог.Более похожий пример также можно найти на сайте: https://valor -software.com / ngx-bootstrap / # / modals .

...