HTML進口angular2應用程序，並通過參數

我想用webcomponents和HTML進口導入的angular2模塊到另一個web應用不使用angular2。我知道HTML導入只能在少數瀏覽器中得到本機支持，但我會使用聚合物框架來調節其他瀏覽器。HTML進口angular2應用程序，並通過參數

我可以導入角應用程序，但我無法將參數傳遞到從我的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>

如何使用角app，其導入到其他應用程序一個WebComponent的時候我將參數傳遞給我的角度應用程序？或者，嘗試將角度應用導入爲webcomponent是完全錯誤的嗎？

來源

2016-09-29 Poku

你應該使用webcomponents.js或只是htmlimports.js聚合物，而不是這樣做。 – Supersharp

我在導入我的角度應用程序的應用程序中使用webcomponents.js。只需在代碼中添加腳本。但是我在我的角度應用程序中需要Polymer來支持本地不支持webcomponents的瀏覽器。 – Poku

Webcomponents.js *爲*中的聚合物使用，以支持各種瀏覽器 – Supersharp

爲了填充工具HTML進口，你只需要包括HTMLImports.js這是在webcomponents.js倉庫中。

bower install webcomponentsjs

就包括<link>元素之前的填充工具：您可以涼亭（或NPM）安裝

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

來源

2016-09-29 20:20:24 Supersharp

Eventhough這並沒有解決我的問題，直接的填充工具（我想導入爲WebComponent的陰影中時，DOM），我會給你答案，因爲你幫我澄清，我可以使用webcomponents.js，你讓我意識到onload回調導致我的解決方案:) – Poku

HTML進口angular2應用程序，並通過參數

回答

相關問題