1、效果展示：

2、安裝：

npm install ionic2-pincode-input --save

3、app.module.ts配置

 1 app.module.ts
 2 
 3 import { NgModule, ErrorHandler } from '@angular/core';
 4 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 5 import { MyApp } from './app.component';
 6 ...
 7 
 8 import { PincodeInputModule } from  'ionic2-pincode-input';
 9 
10 @NgModule({
11   declarations: [
12     MyApp,
13     ...
14   ],
15   imports: [
16     PincodeInputModule,
17     IonicModule.forRoot(MyApp),
18   ],
19   bootstrap: [IonicApp],
20   entryComponents: [
21     MyApp,
22     ...
23   ],
24   providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
25 })
26 export class AppModule {}

3、封裝在Common.ts公共服務(wù)文件中：

 1  // 自定義虛擬密碼輸入框
 2     public openPinCode(): Observable<any> {
 3         return Observable.create(observable => {
 4             let pinCode = this.pincodeCtrl.create({
 5                 title: '支付密碼',
 6                 forgotPasswordText: "取消",
 7                 hideCancelButton: true,
 8             });
 9             pinCode.present();
10             return pinCode.onDidDismiss((code, status) => {
11                 if (status === 'done') {
12                     // 輸入完成
13                     observable.next(code);
14                 }else if (status === 'forgot'){
15                     observable.next(false);
16                 }
17             })
18         })
19     }

4、在實例頁面中調(diào)用：

 1 // 支付寶、微信、余額付款
 2  public confirmPay() {    
 3 // 余額支付(調(diào)用pincode-input插件)
 4     this.Pop.openPinCode().subscribe( res => {
 5 　　　//如果有輸入密碼
 6      if(res !== false){
 7 　　    //輸入的密碼
 8         this.password = res;
 9         //具體邏輯處理47               
10     }
11     });
12 }        

總結(jié)

以上是生活随笔為你收集整理的ionic2(3) 密码键盘组件 ionic2-pincode-input 使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。