В этом руководстве мы покажем, как генерировать QR-коды в приложениях Angular 14 с помощью библиотеки angularx-qrcode. Вы изучите ключевые концепции создания QR-кода, включая использование параметров QR-кода и уровней исправления ошибок. Мы расскажем вам, как включить библиотеку angularx-qrcode в ваше приложение Angular 14, настроить параметры генерации QR-кода и отобразить сгенерированные QR-коды во внешнем интерфейсе. К концу руководства вы сможете создавать собственные QR-коды в своем приложении Angular 14, используя библиотеку angularx-qrcode.
Используйте следующие шаги для создания кода qr в приложениях Angular 14:
Прежде всего, откройте свой терминал и выполните на нем следующую команду, чтобы установить приложение Angular:
ng new my-new-app
Затем выполните следующую команду на терминале, чтобы установить материал Angular:
ng add @angular/material
На этом этапе вам нужно установить angularx-qrcode в наше приложение angular. Итак, откройте терминал и выполните следующую команду:
npm install angularx-qrcode --save
На этом этапе перейдите в каталог 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 { }
На этом шаге создайте 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>
На этом этапе перейдите в каталог 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';
}
}
На этом этапе выполните следующие команды в терминале, чтобы запустить приложение Angular:
ng serve
Руководство заканчивается здесь. теперь вы можете создавать собственный QR-код в своем приложении Angular 14, используя библиотеку angularx-qrcode.