版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TheBestAge/article/details/89513137
使用ngx-qrcode2
1.安装依赖
npm install ngx-qrcode2 --save
2.新建页面:
ionic g page mealcode
3.引入模块(module.ts)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { MealcodePage } from './mealcode.page';
import { NgxQRCodeModule } from 'ngx-qrcode2';
const routes: Routes = [
{
path: '',
component: MealcodePage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
NgxQRCodeModule,
RouterModule.forChild(routes)
],
declarations: [MealcodePage]
})
export class MealcodePageModule {}
4.设置二维码内容(page.ts)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mealcode',
templateUrl: './mealcode.page.html',
styleUrls: ['./mealcode.page.scss'],
})
export class MealcodePage implements OnInit {
cardId="E000001";
mealCode:string;//二维码内容变量
constructor() { }
ngOnInit() {
this.createCode();
}
createCode() {
this.mealCode = this.cardId;
}
}
5.在页面中显示(html)
<ngx-qrcode [qrc-value]="mealCode" qrc-class="card-code" qrc-errorCorrectionLevel="L"></ngx-qrcode>
6.效果图: