UI组件库Kendo UI for Angular入门指南教程

Conversational UI组件弥合了Web 和下一代自然语言应用程序之间的差距。Conversational UI 包提供了Kendo UI聊天组件，该组件允许用户参与与其他用户或聊天机器人的聊天会话。

Conversational UI Package 是Kendo UI for Angular的一部分，这是一个专业级 UI 库，具有 100 多个组件，用于构建现代且功能丰富的应用程序。

Kendo UI for Angular最新版工具下载

基本用法

以下示例演示了 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 stream
this.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 messages
scan((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依赖关系。

了解最新Kendo UI最新资讯，请关注Telerik中文网！