Question

我有一套定制聚合物元素，我想在角度2应用中使用。

似乎聚合物元件的内容标签存在问题。如果元素位于角度2分量内，则元素的内容将在聚合物元素内的错误位置呈现。

示例：

我的聚合物元素“my-button”的模板如下所示：

<template>

  <button>
    <content></content>
  </button>

</template>

使用外角

当我在angular 2组件之外使用这个元素时，我得到了我期望的结果：

使用：

<my-button>Foo</my-button>

结果：

<my-button>
  <button>
    Foo
  </button>
<my-button>

在angular 2组件中使用

在角度2组件中使用时，内容始终在元素模板的末尾呈现。就像内容标签不存在一样。

使用：

<my-button>Foo</my-button>

结果：

<my-button>
  <button>

  </button>
  "Foo"
<my-button>

问题

问题可能是，聚合物和角2都使用内容标签进行转录。因此，将两者结合使用时可能会有点混乱。

我很想在角度2中使用我所有的聚合物元素。所以如何解决这个问题的任何想法都将非常感激。

Answer 1

关于Angular2与Polymer结合使用有一些未解决的问题。例如，Angular不使用Polymer.dom(el)...来操作Polymer元素子元素。这可能会破坏您的组件。解决方法是启用完整的阴影DOM和polyfill。见https://www.polymer-project.org/1.0/docs/devguide/settings.html

我还没有找到解决方案的问题是传递<template>（例如<iron-list>所需要的.Angular自己处理模板并且不将它传递给Polymer元素。

~~有ngNonBindable指令。我还没有在<template ngNonBindable>自己尝试过它，但它可能会有用。~~我试过这似乎只是忽略[prop]="field" / prop="{{field}}绑定。

另一个问题是<style is="custom-style">。它们只能添加到<head>元素或Polymer元素中，但不能添加到Angular组件中。

另见Two-way binding in Angular 2 with NgModel and mutating bound property?

Answer 2

查看https://www.npmjs.com/package/@vaadin/angular2-polymer，这将解决将Polymer元素集成到Angular 2中的大多数问题。

用户指南：https://github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc

教程（草稿）：https://github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc

更好的阴影DOM支持等待从一个单独的分支合并（应该在两周内合并和发布）：https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter

如果你能尝试一下，看看它是否适合你，那就太好了！

最终，文档将在https://vaadin.com/docs/

发布

角2成分内的聚合物元素

2 个答案: