如何在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。

• 安裝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) } }