生成聚合物元件與Angular2

我想結合使用聚合物元件<paper-tabs>與Angular2內容，如：生成聚合物元件與Angular2

<paper-tabs> 
    <paper-tab *ngFor="#tab of tabs">{{ tab }}</paper-tab> 
</paper-tabs>

從角的角度來看，這是正確的，但它完全打破了聚合物元件。

這可能是因爲我正在修改placed inside paper-tabs using <content> tag的元素內部內容。

See plnkr.co demo
（注：它需要禁用瀏覽器CORS，因爲它直接從elements.polymer-project.org鏈接paper-tabs.html）。

在演示中有兩個<paper-tabs>。第一個是Angular2的控制器。如果您按下「添加選項卡」按鈕幾次，它會將它們添加到菜單中，直到您按任何選項卡。然後他們消失，你不能添加任何更多的選項卡。第二個菜單是「香草」聚合物，它是Angular之外的，並且工作正常。

我以前用過Angular2的Polymer元素。例如<google-chart>效果很好，因爲我必須將變量從Angular傳遞到元素。這很容易，因爲我可以直接設置元素的屬性。

<!-- somewhere in a component's template --> 
<google-chart #chart></google-chart>

然後在某個組件的實現：

var options = { 
    'legend': { 
     'position': 'none' 
    }, 
    'chartArea': { 
     'width': '80%', 
     'height': '75%', 
     'left': '15%', 
     'top': '5%' 
    } 
}; 

// grab the <google-chart> element 
var elm = this._viewManager.getNamedElementInComponentView(this._elementRef, 'chart').nativeElement; 
elm.options = this.options; 
elm.type = 'line';

同樣的態度工作也結合它在this video "Componentize your app with Polymer Elements" from AngularU by Rob Dodson很好地解釋事件。

但是，使用<paper-tabs>是不同的，我不知道如何使用它。同樣的問題將發生在任何依賴於你想由Angular2修改的內部HTML內容的Polymer元素上。

來源

2016-02-16 martin

對於<content>標籤工作，你需要啓用陰影DOM和加載全polyfills（webcomponents.js不webcomponents-lite.js）在不完全支持DOM影瀏覽器。

參見https://www.polymer-project.org/1.0/docs/devguide/settings.html

來源

2016-02-16 18:03:46

我試圖切換到'webcomponents.js'但它拋出angular2-polyfills.js裏面的一些錯誤。 http://plnkr.co/edit/4XrsnRsgZ1dlsMZP7X8w?p=preview – martin

似乎紙張選項卡元素不允許從您定義的源加載。 –

生成聚合物元件與Angular2

回答

相關問題