Question

我正在开发一个连接到Quickbooks的angular 2应用程序，并希望包含intuit提供的按钮（具有一些内置功能）。在标准的HTML中，这看起来像：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ipp="">
<head><meta http-equiv="Content-Type"
            content="text/html; charset=ISO-8859-1">
  <title>QBO Connect</title>

  <script type="text/javascript"     src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js">    </script>
  <script>
    intuit.ipp.anywhere.setup({
      grantUrl: 'http://localhost:3000/requestToken',
      datasources: {
        quickbooks : true,  // set to false if NOT using Quickbooks API
        payments : false    // set to true if using Payments API
      }
    });
  </script>
</head>
<body>
<ipp:connectToIntuit></ipp:connectToIntuit>
<ipp:login href= 'http://localhost:3000/login/authenticate'     type="horizontal"></ipp:login>
</body>
</html>

但有角度的2模板不支持脚本代码，我无法弄清楚如何添加自定义代码。如果有人可以请让我知道如何将其转化为角度2，这将是伟大的。感谢

Answer 1

我设法完成了这个（丑陋和令人作呕）的方式：

在模块的index.html中加载Intuit的JS库

<head> <script type="text/javascript" src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js"></script></head>

我无法在名称或名称空间中创建带冒号的指令或组件 - 角度模板解析器只是从名称中删除ipp:而只留下connecttointuit名称，所以在我的组件中我必须手动将元素附加到ngOnInit钩子中的DOM：

@ViewChild('qbContainer') qbContainer; ngOnInit(): void { this.qbContainer.nativeElement .appendChild(document.createElement('ipp:connecttointuit')); }

其中qbContainer在模板中定义如下：

<div id="qb-button-container" #qbContainer></div>

然后我致电window['intuit'].ipp.anywhere.init();让它找到这个元素并替换为他们的实际按钮。

我希望有一个更好的解决方案¯_（ツ）_ /¯

Angular 2添加连接到Intuit按钮

1 个答案: