Question

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

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

Answer 1

如果安装大于0.10.7的BotFramework-WebChat版本，则可以直接在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 Web聊天

1 个答案: