如何用Angular 10生成QR码

QR码（快速响应代码）已经成为每个产品、组织、应用程序等的基本组成部分。在营销活动中，我们可以使用生成的QR码来

• 下载应用程序
• 发送邮件
• 查看业务地点等。

在这篇文章中，让我们看看如何用Angular 10生成QR码。

• 节点可以从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以上的版本。

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

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

ng new <projectname>

这里让我们把 “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片段

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 “组件。

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/';
}

<ngx-qrcode
  [elementType]="elementType"
  [errorCorrectionLevel]="correctionLevel"
  [value]="value"
  cssClass="qrcodeshadow"></ngx-qrcode>
<!-- value that you want to encode -->
<textarea [(ngModel)] = "value"></textarea>

/* 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中成功生成QR码。在CSS中，我们可以对阴影显示进行美化。

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

结论：许多重要的库如QRCode生成器在npm Angular中可用。我们可以根据自己的需要有效地使用它们。QRCode是任何应用程序/移动应用程序等的一个重要组成部分。