UI组件库Kendo UI for Angular入门指南教程： 对话式用户界面功能

Conversational UI组件弥合了Web 和下一代自然语言应用程序之间的差距。Conversational UI 包提供了

基本用法

以下示例演示了 Chat 的实际操作。

app.component.ts

import { Component } from '@angular/core';import { Subject, from, merge, Observable } from 'rxjs';import { switchMap, map, windowCount, scan, take, tap } from 'rxjs/operators';import { ChatModule, Message, User, Action, ExecuteActionEvent, SendMessageEvent } from '@progress/kendo-angular-conversational-ui';import { ChatService } from './chat.service';@Component({providers: [ ChatService ],selector: 'my-app',template: `<kendo-chat[messages]="feed | async"[user]="user"(sendMessage)="sendMessage($event)"></kendo-chat>`})export class AppComponent {public feed: Observable<Message[]>;public readonly user: User = {id: 1};public readonly bot: User = {id: 0};private local: Subject<Message> = new Subject<Message>();constructor(private svc: ChatService) {const hello: Message = {author: this.bot,suggestedActions: [{type: 'reply',value: 'Neat!'}, {type: 'reply',value: 'Thanks, but this is boring.'}],timestamp: new Date(),text: 'Hello, this is a demo bot. I don`t do much, but I can count symbols!'};// Merge local and remote messages into a single streamthis.feed = merge(from([ hello ]),this.local,this.svc.responses.pipe(map((response): Message => ({author: this.bot,text: response})))).pipe(// ... and emit an array of all messagesscan((acc: Message[], x: Message) => [...acc, x], []));}public sendMessage(e: SendMessageEvent): void {this.local.next(e.message);this.local.next({author: this.bot,typing: true});this.svc.submit(e.message.text);}}

chat.service.ts

import { Observable, Subject } from 'rxjs';import { Injectable } from '@angular/core';// Mock remote service@Injectable()export class ChatService {public readonly responses: Subject<string> = new Subject<string>();public submit(question: string): void {const length = question.length;const answer = `"${question}" contains exactly ${length} symbols.`;setTimeout(() => this.responses.next(answer),1000);}}

app.module.ts

import { NgModule } from '@angular/core';import { Component } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { ChatModule } from '@progress/kendo-angular-conversational-ui';import { AppComponent } from './app.component';@NgModule({imports: [ BrowserModule, BrowserAnimationsModule, ChatModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ]})export class AppModule { }

main.ts

import './polyfills';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);

安装

使用快速设置 (Angular CLI) 或手动添加包。

使用Angular CLI进行快速设置

Angular CLI 支持通过 ng add 命令添加包，该命令一步执行一组其他单独需要的命令。

ng add @progress/kendo-angular-conversational-ui

手动设置

1. 下载并安装包及其对等依赖项。

npm install –save @progress/kendo-angular-conversational-ui @progress/kendo-angular-common @progress/kendo-angular-buttons @progress/kendo-angular-popup @progress/kendo-licensing

2. 安装后，在您的应用程序根或功能模块中导入 ChatModule。

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { ChatModule } from '@progress/kendo-angular-conversational-ui';import { AppComponent } from './app.component';@NgModule({bootstrap: [ AppComponent ],declarations: [ AppComponent ],imports: [BrowserModule,BrowserAnimationsModule,ChatModule]})export class AppModule {}

3. 您需要安装一个Kendo UI主题来设置组件的样式。

4. 对于Angular 9.x 及更高版本，安装 @angular/localize 包：

1. 运行npm install –save @angular/localize。
2. 添加import ‘@angular/localize/init’;到你的src/polyfills.ts文件。

5. 按照 Kendo UI for Angular My License 页面上的说明激活您的授权许可。 如果您的应用程序已包含 Kendo UI 许可文件，则可以跳过此步骤。

依赖关系

Conversational UI 包需要您的应用程序必须安装以下对等依赖项：

• @angular/common
• @angular/core
• @progress/kendo-angular-buttons
• @progress/kendo-angular-popup
• @progress/kendo-licensing
• rxjs 5.5+

Kendo UI for Angular | 下载试用

Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。