如何使用 Angular 10 生成二维码？

二维码（Quick Response Code）已成为每个产品、组织、应用程序等的重要组成部分。在营销活动中，我们可以使用生成的二维码

• 下载应用程序
• 发送电子邮件
• 查看营业地点等

在本文中，让我们看看如何使用 Angular 10 生成二维码。

先决条件：在您的本地开发机器上，必须安装 Node 10+ 以及 NPM 6+。

• 可以从 https://nodejs.org/en/download/ 安装节点
• 安装后，我们可以使用

node --version

• npm 可以从 https://www.npmjs.com/get-npm 安装
• 安装后，我们可以使用

npm  --version

第 1 步：安装 Angular CLI 10

在命令行提示符下，提供以下命令进行安装

npm install -g @angular/cli

按照当前版本安装，最好是10+

第 2 步：让我们创建一个新的 Angular 应用程序

我们可以使用 Visual Studio Code 编辑器，甚至可以从命令行提示符，我们可以创建一个生成 QR 码的示例项目

ng new 

这里让我们将“angular10qrcodegeneration”作为项目名称

将安装必要的软件包

现在“angular10qrcodegeneration”的项目结构将是

导航到package.json所在的项目目录

指定项目依赖项的重要文件

第 3 步：要生成 QRCode，我们需要所需的依赖项。它可以通过使用安装

npm install @techiediaries/ngx-qrcode

安装完成后，在src->app->qrcodeapp.module.ts文件中，我们可以使用

import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode'; 

而在

@NgModule({
imports: [ NgxQRCodeModule ] Can be given

我们需要另外导入 FormsModule。所以，我们的src->app->app.module.ts片段

qrcodeapp.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
  
// This import is required to have QRCode generation
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { QRCodeAppRoutingModule } from './qrcodeapp-routing.module';
import { QRCodeAppComponent } from './qrcodeapp.component';
  
@NgModule({
  declarations: [
    QRCodeAppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeAppRoutingModule,
    NgxQRCodeModule,  // This import is required for QRCode
    FormsModule
  ],
  providers: [],
  bootstrap: [QRCodeAppComponent]
})
export class QRCodeAppModule { }

现在库已经被导入，我们可以在 Angular 应用程序中使用“ngx-qrcode”组件。

qrcodeapp.component.ts

import { Component } from '@angular/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } 
        from '@techiediaries/ngx-qrcode';
@Component({
  selector: 'app-root',
  templateUrl: './qrcodeapp.component.html',
  styleUrls: ['./qrcodeapp.component.css']
})
  
export class AppComponent {
  title = 'angular10qrcodegeneration';
  
  // We can have Canvas/Img/Url as elementType
  elementType = NgxQrcodeElementTypes.URL;
  
  // We can have High/Low/Medium/Quartile
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  
  // Need to specify the valid website address
  value = 'https://www.geeksforgeeks.com/';
}

样式.css

/* You can add global styles to this file, 
and also import other style files */
.qrcodeshadow {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(15px 15px 15px #e42424);
    opacity: .5;
}
    
textarea {
    margin-top: 15px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    font-weight: bold;
    color: green;
    opacity: .5;
}

构建项目的步骤

ng build (at the location where your package.json present)

运行项目的步骤：

ng serve  (at the location where your package.json present)

由于代码设置在端口 4200 上运行，在点击 http://localhost:4200/ 时，我们可以看到输出为

我们可以指定任何有效的网站 URL，并且可以在 Angular 10 中成功生成二维码。在 CSS 中，我们可以美化阴影显示。

让我们看看谷歌网站的输出

结论： npm Angular 中提供了许多重要的库，例如 QRCode 生成器。我们可以根据需要有效地使用它们。 QRCode 是任何应用程序/移动应用程序等的重要组件。