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               
    }
    });
}