2

在按钮单击时，我有 3 个函数一个接一个地被调用。在第一个函数中，我想要阻塞模型窗口，它将在该窗口上返回一个承诺，并且在该承诺上我将解决下一个函数。

html代码是：

   <div>
      <h2>Hello {{name}}</h2>
       <button (click)="OnAgeAYear()">click me</button>
   <div bsModal #getRichModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Child modal</h4>
      </div>
      <div class="modal-body">
        getRich quick
      </div>
      <button type="button" class="btn btn-primary" (click)="confirmGetRichYes()" >YES</button>
      <button type="button" class="btn btn-primary" (click)="confirmGetRichNo()" >NO</button>
    </div>
  </div>
</div>
</div>

按钮点击功能：

 OnAgeAYear() {
    //this.getRichModal.show();
    this.fateGetRichQuick()
       .then(
         result=>{
             console.log("promise returned: " + result);
             return this.fateCharity();
           },
         error=> console.log(error))
       .then(
         result=>{
           console.log("promise returned: " + result);
           return this.fateMarriage();
        }).then(
          result=>{
            console.log("promise returned: " + result);
            return this.fateMarriage();
          }
        )
     .catch(error => {
        console.log("generic cach "+error); // will be called if getUser or getRights fails
      })}

3个功能是：

  fateGetRichQuick(): Promise<any>{

   var modal = this.getRichModal;  
    return new Promise<any>(function (resolve, reject) {
      var n= 1;
      modal.show();  
      // I want to resolve this promise only when user clicked yes or no.
    });}
    fateCharity(): Promise<any> {
    return new Promise<any>(function (resolve, reject) {
      resolve("fateCharity-Resolve");
    })}
    fateMarriage(): Promise<any> {
    return new Promise<any>(function (resolve, reject) {
      resolve("fateMarriage - Resolve");
    })}

在模态窗口上我有以下功能：

confirmGetRichYes(): Promise <boolean>{
alert("it is yes....");
this.hideChildModal();
return Promise.resolve(true);}


confirmGetRichNo(): Promise <boolean>{
alert("it is no....");
this.hideChildModal();
return Promise.resolve(false);}


hideChildModal(){
this.getRichModal.hide();}

所以在confirmGetRichYes上，我想解决fateGetRichQuick承诺，但模态窗口不会阻止功能fateGetRichQuick，而是继续它的流程。

我在 plunker 上运行代码：http: //plnkr.co/edit/nX1LcNJeuQvuWSloF50l

4

1 回答 1

0

你可以展示我的例子

确认.component.ts

import { OnInit, Component } from '@angular/core';
import { NgModule } from '@angular/core';

import { ConfirmService, CONFIRMSERVICE } from './confirmservice.service';
import {KeyBoardKeysData} from "../../model/commun/keyboardkeys.data";

declare var $: any;

@Component({
    selector: 'modal-confirm',
    template: `
<div class="modal" id="confirmationModal" data-keyboard="false" data-backdrop="false">
    <div class="modal-body">
        <div class="modal-header">
            <button type="button" id="closeButtonModal" class="close" ><span aria-hidden="true">&times;</span><span
                    class="sr-only">Close</span></button>


             <h5>{{title}}</h5>
        </div>
        <div class="modal-container">
             <p>{{message}}</p>
        </div>
        <div class="modal-footer">

           <button class="btn btn-primary" id="okButton">
                            {{okText}}
                        </button>
                        <button class="btn" id="cancelButton">
                            {{cancelText}}
                        </button>

        </div>
    </div><!-- /.modal-body -->
</div><!-- /.modal -->


        `
})
export class ConfirmComponent implements OnInit {

    private _defaults = {
        title: 'Confirmation',
        message: 'Do you want to cancel your changes?',
        cancelText: 'Cancel',
        okText: 'Ok'
    };
    title: string;
    message: string;
    okText: string;
    cancelText: string;
    isConfirm: boolean = true;

    private _confirmElement: any;
    private _cancelButton: any;
    private _okButton: any;
    private _closeButtonModal: any;

    constructor(confirmService: ConfirmService) {
        confirmService.activate = this.activate.bind(this);
    }

    _setLabels(message = this._defaults.message, title = this._defaults.title) {
        this.title = title;
        this.message = message;
        this.okText = this._defaults.okText;
        this.cancelText = this._defaults.cancelText;
    }

    activate(message = this._defaults.message, title = this._defaults.title, confirm?: boolean): Promise<boolean> {
        console.log('Displays confirmation dialog');
        if (confirm) {
            this.isConfirm = true;
            this._cancelButton.style.display = 'inline-block';
            this.okText = 'Ok';
        } else {
            this.isConfirm  = false;
            this._cancelButton.style.display = 'none';
            this.okText = 'Cancel';
        }
        this._setLabels(message, title);
        let promise = new Promise<boolean>(resolve => {
            this._show(resolve);
        });
        return promise;
    }

    private _show(resolve: (boolean) => any) {
        document.onkeyup = null;

        if (!this._confirmElement || !this._okButton) return;

        window.setTimeout(() => $('#confirmationModal').modal('show'), 50);

        this._cancelButton.onclick = this._closeButtonModal.onclick = ((e: any) => {
            e.preventDefault();
            console.log('Confirm: click cancel');
            resolve(false);
            this._hideDialog();
        });

        this._okButton.onclick = ((e: any) => {
            e.preventDefault();
            console.log('Confirm: click ok');
            resolve(true);
            this._hideDialog();
        });

        document.onkeyup = (e: any) => {
            if (e.which == KeyBoardKeysData.ESCAPE) {
                this._hideDialog();
                return resolve(false);
            }
        };
    }

    private _hideDialog() {
        window.setTimeout(() => $('#confirmationModal').modal('hide'), 0);
    }

    ngOnInit(): any {
        this._confirmElement = document.getElementById('confirmationModal');
        this._cancelButton = document.getElementById('cancelButton');
        this._okButton = document.getElementById('okButton');
        this._closeButtonModal = document.getElementById('closeButtonModal');

    }
}

@NgModule({
  declarations: [ConfirmComponent],
  providers: [CONFIRMSERVICE],
  exports: [ConfirmComponent]
})
export class ConfirmModule {

}

确认服务.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class ConfirmService {
  activate: (message?: string, title?: string, confirm?: boolean) => Promise<boolean>;
  register() {

  }
}

export const CONFIRMSERVICE: any[] = [
    ConfirmService,

]

在您的页面中添加 html 页面

<modal-confirm id="modalConfirm" #modalConfirm    tabindex="0">
</modal-confirm>

你可以这样称呼它

this.confirmService.activate('Are you sure to delete ?', 'Delete?', true).then(diagRes => {

  console.info('confirmService activate',diagRes);

  if(diagRes) {

    this.confirmService.activate('Player has been deleted', 'Information').then(daigRes2 => {
      // Another result…
    });


  }
});

希望我的例子对你有帮助

于 2016-12-28T11:19:03.007 回答