利用bootstrap的modal，angular与rxjs自创建提示框

不多说，直接上代码吧。

 

首先是服务类:

@Injectable()
export class Warn {

  private alertShowSubject = new Subject<{message:string,subject:Subject<boolean>}>();
  private confirmShowSubject = new Subject<{question:string,subject:Subject<boolean>}>();
  private promptShowSubject = new Subject<{prompt:{title:string,defaultValue:string},
    subject:Subject<{answer:string,confirm:boolean}>}>();

  constructor(){
  }

  alertShowEvent = this.alertShowSubject.asObservable();
  confirmShowEvent = this.confirmShowSubject.asObservable();
  promptShowEvent = this.promptShowSubject.asObservable();

  alert(message:string):Observable<boolean> {
    let alertSubject = new Subject<boolean>();
    let alertEvent = alertSubject.asObservable();
    this.alertShowSubject.next({message:message,subject:alertSubject});
    return alertEvent;
  }

  confirm(question:string):Observable<boolean> {
    let confirmSubject = new Subject<boolean>();
    let confirmEvent = confirmSubject.asObservable();
    this.confirmShowSubject.next({question:question,subject:confirmSubject});
    return confirmEvent;
  }

  prompt(title:string,defaultValue:string):Observable<{answer:string,confirm:boolean}>{
    let promptSubject = new Subject<{answer:string,confirm:boolean}>();
    this.promptShowSubject.next({prompt:{title:title,defaultValue:defaultValue},subject:promptSubject})
    return promptSubject.asObservable();
  }
}

然后是组件:

@Component({
  templateUrl:"./warn.component.html",
  moduleId:module.id,
  selector:"warn"
})
export class WarnComponent implements OnInit{
  ngOnInit(): void {
    this.warn.alertShowEvent
      .subscribe((e:{message:string,subject:Subject<boolean>}) => {
        this.alertMessage = e.message;
        this.alertSubject = e.subject;
        this.modal.open(true);
      },() => {
        console.log("错误")
      },() => {
        console.log("完成")
      });
    this.warn.confirmShowEvent.subscribe((e:{question:string,subject:Subject<boolean>}) => {
      this.confirmQuestion = e.question;
      this.confirmSubject = e.subject;
      this.modal.open(true);
    });
    this.warn.promptShowEvent.subscribe((e:{prompt:{title:string,defaultValue:string},
      subject:Subject<{answer:string,confirm:boolean}>}) =>{
      this.prompt = e.prompt;
      this.promptSubject = e.subject;
      this.modal.open(true);
    })
  }

  alertMessage:string;
  alertSubject:Subject<boolean>;

  confirmQuestion:string;
  confirmSubject:Subject<boolean>;

  prompt:{title:string,defaultValue:string};

  promptSubject:Subject<{answer:string,confirm:boolean}>;

  constructor(private warn:Warn,private modal:ModalService){

  }

  closeAlert(){
    this.alertMessage = null;
    this.alertSubject.next(true);
    this.alertSubject.complete();
    this.modal.open(false);
  }

  closeConfirm(confirm:boolean) {
    this.confirmQuestion = null;
    this.confirmSubject.next(confirm);
    this.confirmSubject.complete();
    this.modal.open(false);
  }

  closePrompt(answer:string,confirm:boolean) {
    this.prompt = null;
    this.promptSubject.next({answer:answer,confirm:confirm});
    this.promptSubject.complete();
    this.modal.open(false);
  }


}

再然后是模板:

<div class="modal" *ngIf="alertMessage" style="display: block;padding-left: 0">
  <div class="modal-alert">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">提示</div>
      </div>
      <div class="modal-body text-warning">
        <span class="glyphicon glyphicon-warning-sign"></span> {{alertMessage}}
      </div>
      <div class="modal-footer"><button class="btn btn-warning" (click)="closeAlert()">关闭</button></div>
    </div>

  </div>
</div>

<div class="modal" *ngIf="confirmQuestion" style="display: block;padding-left: 0">
  <div class="modal-alert">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">提示</div>
      </div>
      <div class="modal-body text-warning">
        <span class="glyphicon glyphicon-warning-sign"></span> {{confirmQuestion}}
      </div>
      <div class="modal-footer"><button class="btn btn-default" (click)="closeConfirm(false)">取消</button><button class="btn btn-primary" (click)="closeConfirm(true)">确定</button></div>
    </div>
  </div>
</div>

<div class="modal" *ngIf="prompt" style="display: block;padding-left: 0">
  <div class="modal-alert">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">{{prompt.title}}</div>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <input type="text" class="form-control" [value]="prompt.defaultValue" #answer>
        </div>
      </div>
      <div class="modal-footer"><button class="btn btn-default" (click)="closePrompt(answer.value,false)">取消</button><button class="btn btn-primary" (click)="closePrompt(answer.value,true)">确定</button></div>
    </div>
  </div>
</div>

 

confirm的效果图如下：

prompt效果图如下：

 

 

方法很简单，每一种都弄两个Observable，第一个Observable用来显示提示框，这个事件里的subject里包含第二个Observable的subject，第二个Observable是用于用户点击确定或取消后的操作，这个Observable是相应方法后返回，它们的subject也在操作后就complate了，以免后续别的操作影响前面的。这里有一些缺陷，那就是假如多个提示框同时打开会混乱，逻辑上它并没有浏览器本身的哪些提示框的阻塞性，也就是说如warn.confirm(...)后面的代码不会被阻塞，相应的操作也只能在subscript中进行，而不能简单的if(warn.confirm){}

 

注：此文章在别的网站先发表的，都是本人

转载于:https://my.oschina.net/mylgb634335272/blog/865766