Question

我想使用webcomponents和HTML import将angular2模块导入另一个不使用angular2的webapplication。我知道HTML导入仅在少数浏览器中本机支持，但我将使用聚合物框架来描述其他浏览器。

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

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

当使用角度应用程序作为导入到另一个应用程序的web组件时，如何将参数传递给我的角度应用程序？或者尝试将角度应用程序导入为web组件是完全错误的吗？

Answer 1

为了填充HTML Imports，您只需要包含webcomponents.js存储库中提供的HTMLImports.js。您可以使用 bower （或 npm ）安装它：

bower install webcomponentsjs

只需在<link>元素前加入polyfill：

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

要等待加载导入的文件，您可以使用Promise，或者等待标准 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）上是同步的;如果您不想阻止解析，请在async中使用<link>。

HTML import angular2 app并传递参数

1 个答案: