日期: 2017 年 10 月 25 日

1.tabs.tsc

import { Component } from '@angular/core';
import { IonicPage, NavController, MenuController, Events } from 'ionic-angular';
import { Subscription } from "rxjs";
import { TimerObservable } from "rxjs/observable/timerObservable";

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  lastPing?: Date = null;
  private subscription: Subscription;
  
  constructor(public navCtrl: NavController, public menuCtrl: MenuController, public events: Events) {
  }
  
  ionViewDidLoad() {
    this.lastPing = new Date();
    this.events.subscribe('user:click', (info, time) => {
        console.log('user:click', info, 'at', time);
        this.lastPing = new Date();
    });
    
    let timer = TimerObservable.create(20000, 5000);
    this.subscription = timer.subscribe(t => {
      console.log('ionViewDidLoad t: ' + t);
      
      var now = new Date();
      var diff = this.toSeconds(now - this.lastPing);
      console.log(diff.toString());

    });
  }
  
  toSeconds(diff) {
      var ms = diff % 1000;
      diff = (diff - ms) / 1000;
      var secs = diff % 60;
      diff = (diff - secs) / 60;
      var mins = diff % 60;
      
      return mins;
  }
  
  ionViewDidLeave() {
    this.subscription.unsubscribe();
  }
    
  openMenu(menuId : any) {
    this.events.publish('user:click', 'openMenu', Date.now());    
  }  
}
    

2.結果畫面

ionic2 產生 QRCode
1.安裝
cd [ionic Project Directory]
npm install angularx-qrcode –save
2.qrcode.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { QRCodeModule } from 'angularx-qrcode';
import { QrcodePage } from './qrcode';

@NgModule({
  declarations: [
    QrcodePage
  ],
  imports: [
    IonicPageModule.forChild(QrcodePage),
    QRCodeModule
  ]
})
export class QrcodePageModule {}
  

3.qrcode.tsc

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { QRCodeModule } from 'angularx-qrcode';

@IonicPage()
@Component({
  selector: 'page-qrcode',
  templateUrl: 'qrcode.html'
})
export class QrcodePage {
  encodeData2 : string = '1234';
  
  constructor(public navCtrl: NavController, public navParams: NavParams, private qrScanner: QRScanner) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad QrcodePage');
  }
}   
    

4.qrcode.html

<ion-header>
 <ion-navbar>
 <ion-title text-center>QRCode</ion-title>
 </ion-navbar>
</ion-header>
<ion-content padding>
 <ion-card>
 <ion-card>
 <qrcode [qrdata]="'My QR code data string'" [size]="256" [level]="'M'"></qrcode>
 </ion-card>
 </ion-card>
 
 <ion-card>
 <ion-card-header class="text-c">
 <ion-input type="text" [(ngModel)]="encodeData2" name="encodeData2" placeholder="請輸入QRCode"></ion-input>
 </ion-card-header>
 <ion-card>
 <qrcode [qrdata]="encodeData2" [size]="256" [level]="'M'"></qrcode>
 </ion-card>
 </ion-card>
</ion-content>

5.結果畫面

參考: https://github.com/Cordobo/angularx-qrcode