開始

---

立即下載Kendo UI for Angular

本指南提供了開始使用Kendo UI for Angular條形碼所需的信息——包括可用的安裝方法、所需的依賴項、運行項目的代碼，以及其他資源的鏈接。

完成本指南后，您將能夠獲得如下示例所示的最終結果。

查看源代碼

app.component.ts：

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

@Component({
selector: 'my-app',
styles: [`
.k-card {
width: 50%;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Barcode
</div>
</div>
<div class="k-card-body">

<kendo-barcode type="EAN13" value="123456789012">
</kendo-barcode>

</div>
</div>

<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
QR Code
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="http://www.telerik.com/kendo-angular-ui/components/barcodes/">
</kendo-qrcode>

</div>
</div>
</div>
`
})
export class AppComponent {
}

app.module.ts：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BarcodesModule, ButtonsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts：

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

設置你的Angular項目

在開始安裝任何Kendo UI for Angular控件之前，請確保你有一個正在運行的Angular項目。不管你想要使用哪個Kendo UI for Angular包，完成組件安裝的先決條件都是一樣的，在安裝中有詳細描述。

安裝組件

你可以選擇使用以下兩種方式來安裝Kendo UI for Angular包和你想要應用的樣式：

用Angular CLI快速設置

快速設置提供了一種通過命令在中自動添加包的方法。它適合于節省時間和精力，因為ng-add可以在一個步驟中執行一組單獨需要的命令。

若要添加Kendo UI for Angular Barcodes包請運行以下命令：

ng add @progress/kendo-angular-barcodes

因此，ng-add命令將執行如下操作：

將@progress/kendo-angular-barcodes包作為一個依賴項添加到 package.json文件中。

在當前應用程序模塊中導入BarcodesModule。

在angular.json文件中注冊。

將所有必需的對等依賴項添加到 package.json 文件中。

觸發npm install來安裝主題和所有被添加的同級包。

手動設置

手動設置提供了更好的可視性和對安裝在Angular應用程序中的文件和引用的更好控制。您可以通過為每個步驟運行單獨的命令來安裝所需的對等依賴項和Kendo UI主題，并在或特性模塊中導入所需的組件模塊。

1.運行以下命令安裝Barcodes包及其依賴項：

npm install --save @progress/kendo-angular-barcodes @progress/kendo-angular-common
@progress/kendo-drawing @progress/kendo-licensing

2.如果應用程序中需要所有條形碼組件，請使用BarcodesModule一次性導入所有條形碼，否則將通過添加特定組件的各個模塊來導入特定組件。

Barcodes包為其組件導出以下單個模塊：

模塊	組件
BarcodeModule	條形碼
QRCodeModule	QRCode

• 要添加所有條形碼組件，請在或特性模塊中導入BarcodesModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { AppComponent } from './app.component';

import 'hammerjs';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, BarcodesModule]
})
export class AppModule {
}

• 要添加單獨的條形碼組件，只需導入或特性模塊中需要的模塊。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Imports the Barcode module
import { BarcodeModule } from '@progress/kendo-angular-barcodes';

// Imports the QR Code module
import { QRCodeModule } from '@progress/kendo-angular-barcodes';

@NgModule({
bootstrap: [AppComponent],
imports: [
BrowserModule, BrowserAnimationsModule,
BarcodeModule, QRCodeModule
]
})
export class AppModule {
}

3.下一步是通過安裝可用的Kendo UI主題之一來樣式化組件- ，或。

3.1開始使用一個主題需要通過NPM安裝它的包。

• 默認主題

npm install --save @progress/kendo-theme-default

• 引導主題

npm install --save @progress/kendo-theme-bootstrap

• 材料的主題

npm install --save @progress/kendo-theme-material

3.2 主題包安裝完成后可在工程中引用，您可以通過以下方式之一在項目中包含KendoU I主題：

• 通過使用。
• 通過使用。
• 通過從編譯主題。

使用組件

1.在成功安裝Barcodes包并導入所需模塊之后，在app.component.html中添加所需組件的相應標簽。例如，如果需要Barcode組件則添加以下代碼：

<kendo-barcode type="EAN8" value="1234567">
</kendo-barcode>

2.通過在根文件夾中運行以下命令來構建并提供應用程序。

ng serve

3.將瀏覽器指向，可以在頁面上看到Angular Barcode組件的Kendo UI。

激活許可證密鑰

截至2020年12月，使用任何來自Kendo UI for Angular庫的UI組件都需要一個商業許可密鑰或一個有效的試用許可密鑰。如果您的應用程序不包含Kendo UI許可文件，請激活您的許可密鑰。

屬地

下表列出了每個條形碼依賴項所提供的特定功能：