angular 2 组分内的聚合物元素

Question

我有一组自定义聚合物元素，我想在 angular 2 应用程序中使用。

聚合物元素的内容标签似乎有问题。如果元素位于 angular 2 组件中，则元素的内容在聚合物元素中的错误位置呈现。

示例：

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

<template>

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

</template>

在外面使用angular

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

使用：

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

结果：

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

在angular 2 分量内使用

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

使用：

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

结果：

<my-button>
  <button>

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

问题

问题可能是，polymer 和 angular2 都使用内容标签进行转译。所以当两者一起使用时，事情可能会变得有点混乱。

我很乐意在 angular 2 中使用我所有的聚合物元素。因此，非常感谢任何关于如何解决此问题的想法。

Answer 1

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

一个我还没有找到解决方案的问题正在通过 <template>s（例如 <iron-list> 所必需的）。Angular 自行处理模板并且没有通过它到聚合物元素。

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

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

另见

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

Better shady DOM 支持正在等待从单独的分支合并（应在两周内合并并发布）：https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter

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

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

angular 2 组分内的聚合物元素

Polymer elements within angular 2 component

html

javascript

web-component

polymer

angular