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中文网！