前端生成二维码使用@techiediaries/ngx-qrcode

最新推荐文章于 2023-04-03 12:42:40 发布

前端小白的逆袭

最新推荐文章于 2023-04-03 12:42:40 发布

阅读量778

点赞数 2

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/Kindergarten_Sir/article/details/112564395

版权

Web前端专栏收录该内容

140 篇文章 8 订阅

订阅专栏

一、安装@techiediaries/ngx-qrcode

npm install @techiediaries/ngx-qrcode --save

二、app.module.ts模块导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';  // 导入
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxQRCodeModule  // 注入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html代码

<ngx-qrcode [elementType]="elementType" [value]="value" cssClass="aclass" errorCorrectionLevel="L"></ngx-qrcode>

app.component.ts代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  elementType = 'url';  // 定义类型 URL、Canvas、Image
  value = 'Techiediaries';  // 二维码值
}