如何在 Angular5 应用程序中使用 Microsoft Bot Framework 网络聊天

本文介绍了如何在 Angular5 应用程序中使用 Microsoft Bot Framework 网络聊天的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我需要一种在我的 angular 5 应用程序中嵌入网络聊天的方法.我已经尝试过这里描述的非反应网站方式:https://github/Microsoft/BotFramework-WebChat，它的工作原理.

I need a way to embed web chat in my angular 5 application. I have tried the non react website way described here: https://github/Microsoft/BotFramework-WebChat and it works.

有没有办法只使用组件而不是加载整个 js 文件来获取我的 Angular 5 应用程序中的聊天窗口?

Is there a way to use the components only rather than loading the entire js file to get the chat window in my Angualar 5 app?

推荐答案

如果你安装了大于 0.10.7 的 BotFramework-WebChat 版本，你可以直接在 ng 应用中使用 BotFramework-WebChat.

If you install the BotFramework-WebChat version greater than 0.10.7, you can directly use the BotFramework-WebChat in ng application.

安装网络聊天sdk:npm install botframework-webchat

在.angular-cli.json文件中填写样式文件:

"styles": [
  "../node_modules/botframework-webchat/botchat.css",
  "../node_modules/botframework-webchat/botchat-fullwindow.css"
],

在 https://github 中讨论的组件中尝试示例/Microsoft/BotFramework-WebChat/issues/478:

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {App} from "botframework-webchat";
@Component({
  selector: 'app-root',
  template: `<div id="bot-chat-container" #botWindow></div>`,
})
export class AppComponent implements OnInit {

  @ViewChild("botWindow") botWindowElement: ElementRef;

  ngOnInit(): void {
    App({
      directLine: {secret: 'secret goes here'},
      user: {id: 'user'},
      bot: {id: 'bot'},
    }, this.botWindowElement.nativeElement)
  }
}

这篇关于如何在 Angular5 应用程序中使用 Microsoft Bot Framework 网络聊天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！