Как создать генератор QR-кода в Angular

В этом руководстве мы покажем, как генерировать QR-коды в приложениях Angular 14 с помощью библиотеки angularx-qrcode. Вы изучите ключевые концепции создания QR-кода, включая использование параметров QR-кода и уровней исправления ошибок. Мы расскажем вам, как включить библиотеку angularx-qrcode в ваше приложение Angular 14, настроить параметры генерации QR-кода и отобразить сгенерированные QR-коды во внешнем интерфейсе. К концу руководства вы сможете создавать собственные QR-коды в своем приложении Angular 14, используя библиотеку angularx-qrcode.

Используйте следующие шаги для создания кода qr в приложениях Angular 14:

Оглавление

• Шаг 1: Создайте новое приложение Angular
• Шаг 2: Установите пакет Angularx-qrcode npm
• Шаг 3: Добавьте модули в файл Module.ts
• Шаг 4: Создайте QR-код в файле просмотра
• Шаг 5: Добавьте код в файл ts компонента
• Шаг 6: Запустите приложение Angular 
   

Шаг 1: Создайте новое приложение Angular

Прежде всего, откройте свой терминал и выполните на нем следующую команду, чтобы установить приложение Angular:

ng new my-new-app

Затем выполните следующую команду на терминале, чтобы установить материал Angular:

ng add @angular/material

Шаг 2: Установите пакет angularx-qrcode npm

На этом этапе вам нужно установить angularx-qrcode в наше приложение angular. Итак, откройте терминал и выполните следующую команду:

npm install angularx-qrcode --save

Шаг 3: Добавьте модули в файл Module.ts

На этом этапе перейдите в каталог src/app и откройте файл app.module.ts . Затем добавьте в него следующий код:

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

Шаг 4: Создайте QR-код в файле просмотра

На этом шаге создайте html и код для отображения qr в приложениях Angular. Итак, посетите src/app/app.component.html и обновите в нем следующий код:

<h1>How to Generate QR Code in Angular 14?</h1>
    
<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

Шаг 5: Добавьте код в файл ts компонента

На этом этапе перейдите в каталог src/app и откройте app.component.ts . Затем добавьте следующий код в файл component.ts:

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myAngularxQrCode: string = null;
   
  constructor () {
    this.myAngularxQrCode = 'tutsmake.com';
  }
}

Шаг 6: Запустите приложение Angular

На этом этапе выполните следующие команды в терминале, чтобы запустить приложение Angular:

ng serve

Руководство заканчивается здесь. теперь вы можете создавать собственный QR-код в своем приложении Angular 14, используя библиотеку angularx-qrcode.