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 。