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

翻译|使用教程|编辑:龚雪|2021-09-24 10:06:04.183|阅读 20 次

概述:本文主要介绍Kendo UI for Angular组件的对话式用户界面功能,欢迎下载最新版产品体验!

# 31款JAVA开发必备控件和工具 # 开发软/控件产品年终优惠

相关链接:

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

慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for Angular

完整的Angular UI组件库,助力构建高性能的现代Angular应用。

title
在线咨询
联系我们
TOP
在线客服系统
live chat