简单：在您的非React网站中，运行Web Chat inline

添加DirectLine（非Web Chat）频道，并生成直接线路密钥。确保启用Direct Line 3.0。

在您的网站上加入botchat.css和botchat.js，例如：

<!DOCTYPE html>
<html>
  <head>
     <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
  <div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
  BotChat.App({
    directLine: { secret: direct_line_secret },
    user: { id: 'userid' },
    bot: { id: 'botid' },
    resize: 'detect'
  }, document.getElementById("bot"));
</script>
</body>
</html>

现在我已经将我的本地路径插入到标题中的构建CSS以及js文件中，然后在我的组件中，我已经声明了变量BotChat

declare var BotChat;

然后我把脚本放在我的构造函数

中

constructor() {
    BotChat.App({
    directLine: { secret: direct_line_secret },
    user: { id: 'userid' },
    bot: { id: 'botid' },
    resize: 'detect'
  }, document.getElementById("bot"));
}

但它似乎无法在控制台中获取此错误

Loading failed for the <script> with source 
“http://localhost:4200/BotFramework-WebChat-master/botchat.js”

和

Error: [object Object]
Stack trace:
resolvePromise@http://localhost:4200/polyfills.bundle.js:7633:31

任何帮助将不胜感激

Answer 1

在你的chatsidebar.component.ts中添加所有导入语句

declare var BotChat;

这实际上是打字的方式告诉你在其他地方声明了一些全局变量，并且你想要使用它。

declare keyword

另外，请尝试使用角度的renderer2而不是直接dom操作。

Angular renderer

Answer 2

好的，所以在玩了一会儿之后，我想出来了。

要在现有的角度应用程序中使用botchat框架，请将您从github下载的botchat文件夹放在src文件夹中。在项目的botchat文件夹中运行npm install和npm build。链接angular.cli中构建的js和css文件。

在您的组件中

import { component, ViewAfterInit } from @angular/cli;

declare var BotChat; //important

然后

ngAfterViewInit(){
    BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' }, //DONT ACTUALLY PUT IN YOUR BOT ID IT WILL BREAK THE APP
        resize: 'detect'
    }, document.getElementById("bot"));
}

这将使它在角度应用程序中起作用。

麻烦在Angular 2应用程序中使用Microsoft BotFramework-WebChat

简单：在您的非React网站中，运行Web Chat inline

2 个答案: