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

Question

我想使用 webcomponents 和 HTML 导入将 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 应用程序作为 Web 组件导入是完全错误的？

Answer 1

为了HTMLImports.js 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）上是同步的； 如果您不想阻止解析，请在<link>使用async 。