开始

立即下载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="//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包为其组件导出以下单个模块：

• 要添加所有条形码组件，请在或特性模块中导入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许可文件，请激活您的许可密钥。

属地

下表列出了每个条形码依赖项所提供的特定功能：