ionic2 產生 QRCode

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.結果畫面