Question

我正在尝试将Polymer元素<paper-tabs>与Angular2结合使用，如：

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

从Angular的角度来看，这是正确的，但它完全打破了Polymer元素。

这可能是因为我正在修改元素内部内容placed inside paper-tabs using <content> tag。

See plnkr.co demo
（注意：它需要禁用浏览器CORS，因为它直接从paper-tabs.html链接elements.polymer-project.org。）

在演示中，有两个<paper-tabs>。第一个是Angular2的控制器。如果多次按“添加标签”按钮，它会将它们添加到菜单中，直到您按下任何标签。然后它们消失，你不能再添加任何标签。第二个菜单是'vanilla'聚合物，它在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元素都会遇到同样的问题。

Answer 1

要使<content>标记生效，您需要在不完全支持shadow DOM的浏览器上启用shadow DOM并加载完整的polyfill（webcomponents.js而不是webcomponents-lite.js）。

另见https://www.polymer-project.org/1.0/docs/devguide/settings.html

使用Angular2生成Polymer元素的内容

1 个答案: