ionic2(3) 密码键盘组件 ionic2-pincode-input 使用

1、效果展示：

2、安装：

npm install ionic2-pincode-input --save

3、app.module.ts配置

 app.module.ts

 import { NgModule, ErrorHandler } from '@angular/core';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
 ...

 import { PincodeInputModule } from  'ionic2-pincode-input';

 @NgModule({
   declarations: [
     MyApp,
     ...
   ],
   imports: [
     PincodeInputModule,
     IonicModule.forRoot(MyApp),
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
     ...
   ],
   providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
 })
 export class AppModule {}

3、封装在Common.ts公共服务文件中：

  // 自定义虚拟密码输入框
     public openPinCode(): Observable<any> {
         return Observable.create(observable => {
             let pinCode = this.pincodeCtrl.create({
                 title: '支付密码',
                 forgotPasswordText: "取消",
                 hideCancelButton: true,
             });
             pinCode.present();
             return pinCode.onDidDismiss((code, status) => {
                 if (status === 'done') {
                     // 输入完成
                     observable.next(code);
                 }else if (status === 'forgot'){
                     observable.next(false);
                 }
             })
         })
     }

4、在实例页面中调用：

 // 支付宝、微信、余额付款
  public confirmPay() {
 // 余额支付(调用pincode-input插件)
     this.Pop.openPinCode().subscribe( res => {
 　　　//如果有输入密码
      if(res !== false){
 　　    //输入的密码
         this.password = res;
         //具体逻辑处理47
     }
     });
 }