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

我需要一种在angular 5应用程序中嵌入网络聊天的方法。我已经尝试过这里描述的无反应的网站方式：它是有效的

---

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

如果您安装的BotFramework WebChat版本大于

0.10.7

，您可以直接在ng应用程序中使用BotFramework WebChat

• 安装webchat sdk:

  npm安装框架webchat

• 在

  .angular cli.json

  文件中填充样式文件：

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

• 请尝试以下讨论的组件中的示例：

  从'@angular/core'导入{Component，ElementRef，OnInit，ViewChild}；
  从“botframework webchat”导入{App}；
  @组成部分({
  选择器：'应用程序根'，
  模板：``，
  })
  导出类AppComponent实现OnInit{
  @ViewChild（“botWindow”）botWindowElement:ElementRef；
  ngOnInit（）：void{
  应用程序({
  directLine:{secret:'这里有秘密'}，
  用户：{id:'user'}，
  bot:{id:'bot'}，
  }，this.botWindowElement.nativeElement）
  }
  }
  

---

FYI这将捆绑react框架，并将显著增加捆绑文件大小

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