HTML import angular2 appとpassパラメータ

Question

angle2モジュールをangle2を使用しない別のWebアプリケーションにインポートするには、webcomponentsとHTML importを使用します。私は、HTMLのインポートはいくつかのブラウザでネイティブにしかサポートされていないことを知っていますが、私はポリマーフレームワークを使用して他のブラウザに影響を与えます。

角度アプリをインポートできますが、角度アプリをインポートするウェブアプリから角度アプリにパラメータを渡すことができません。私はこれをしようとしている：

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

別のアプリケーションにインポートされwebcomponentとして角度アプリを使用する際にどのように私は私の角のアプリにパラメータを渡すのですか？または、Webコンポーネントとして角型アプリケーションをインポートしようとするのはまったく間違っていますか？

Answer 1

HTMLインポートをポリファイリングするには、HTMLImports.jsを含めるだけで、webcomponents.jsリポジトリにあります。あなたはバウアー（またはNPM）とそれをインストールすることができます。

bower install webcomponentsjs 

は

だけ<link>要素の前にポリフィルを含める：

<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>に入力してください。