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

Question

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

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

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)
    }
  }