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

Question

我需要一种在我的 angular 5 应用程序中嵌入网络聊天的方法。我已经尝试过此处描述的非反应网站方式：https://github.com/Microsoft/BotFramework-WebChat 并且有效。

有没有办法只使用组件而不是加载整个 js 文件来在我的 Angualar 5 应用程序中进行聊天 window？

Answer 1

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

安装微信SDK：npm install botframework-webchat

填写.angular-cli.json文件中的样式文件：

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

尝试 https://github.com/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 网络聊天

How to use Microsoft Bot Framework web chat in Angular5 application

angular

botframework

web-chat