HTML 导入 angular2 应用程序并传递参数

Question

我想使用 webcomponents 和 HTML import 将 angular2 模块导入另一个不使用 angular2 的 web 应用程序。我知道 HTML 导入仅在少数浏览器中受本地支持，但我将使用聚合物框架来轮询其他浏览器。

我可以导入 angular 应用程序，但我无法从导入 angular 应用程序的 Web 应用程序向 angular 应用程序传递参数。我正在尝试这个：

<dom-module id="sale-stats">
  <link rel="import" href="../bower_components/polymer/polymer.html">
  <template>
    <!-- contains my angular app bundled js files -->
    <link rel="import" href="imports.html">
    {{saleid}} <!-- this displays the saleid just to see that the parameter is passed to the webcomponent -->

    <app-root saleid='{{saleid}}'>Loading... </app-root>
  </template>

  <script>
    HTMLImports.whenReady(function () {

      Polymer({
        is: 'sale-stats',

        properties: {
          saleid: {
                type: String,
                value: '0'
            }
        },
      });
    });
  </script>
</dom-module>

<script src="/Scripts/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://localhost:9600/salestats/index.html" />
<sale-stats saleid="1234567"></sale-stats>

在将 angular 应用程序用作导入到另一个应用程序的 Web 组件时，如何将参数传递到我的 angular 应用程序？还是尝试将 angular 应用作为网络组件导入是完全错误的？

Answer 1

为了 polyfill HTML 导入，您只需要包含 HTMLImports.js，它在 webcomponents.js 存储库中可用。您可以使用 bower（或 npm）安装它：

bower install webcomponentsjs

只需在 <link> 元素之前包含 polyfill:

<script src=".../bower_components/webcomponentsjs/HTMLImports.js"></script>

要等待加载导入的文件，您可以使用 Promise，或者等待 standard onload 事件。例如：

<script src=".../bower_components/webcomponentsjs/HTMLImports.js"></script>
<link rel="import" href="imports.html" onload="run( 1234567 )">

在导入的 HTML 文件中：

<!-- contains my angular app bundled js files -->
<script>
    function run ( id ) 
    {
        var app = document.createElement( 'app-root' )
        app.setAttribute( 'saleid', id )
        document.body.appendChild( app )                
    }
</script>

注意：您也可以将onload回调函数放在主文档中。此外，导入在本机实现上是同步的（Chrome 和 Opera）；如果不想阻止解析，请在 <link> 中使用 async。

HTML 导入 angular2 应用程序并传递参数

HTML import angular2 app and pass parameter

javascript

web-component

angularjs

polymer

angular