角2分量内的聚合物元素 [英] Polymer elements within angular 2 component
问题描述
我有一套自定义聚合物元素，我想在角度2应用程序中使用。
好像有关于内容标签的问题聚合物元素。如果元素位于角度2分量内，则元素的内容会呈现在聚合物元素内的错误位置。
示例：
我的聚合物元素my-button的模板如下所示：
<模板>
<按钮>
< content>< / content>
< / button>
< / template>
使用外部角度
当我在我的角度2组件外使用此元素时，我得到了我期望的结果：
使用：
< my-button> Foo< / my-button>
结果：
<我的按钮>
<按钮>
Foo
< / button>
< my-button>
在角度2分量中使用
在角度2组件中使用时，内容始终在元素模板的末尾呈现。就像内容标签不存在一样。
使用：
<我的按钮>富< /我的按钮>
结果：
<我的按钮>
<按钮>
< / button>
Foo
< my-button>
问题
<问题可能是，聚合物和角2都使用内容标签进行转染。所以在使用两者时可能会有些混乱。
我喜欢在角度2内使用我所有的聚合物元素。因此，有关如何解决这个问题的任何想法都会非常感谢。
有关Angular2与Polymer结合的一些开放性问题。例如，Angular不使用
> Polymer.dom（el）... 来操作Polymer元素子元素。这可能会破坏你的组件。 解决方法是启用全影DOM和polyfills。请参阅 https://www.polymer-project.org/1.0/docs /devguide/settings.html
我还没有找到解决方案的问题是传递 另一个问题是 另见使用NgModel和改变绑定属性的Angular 2中的双向绑定？ I have a set of custom polymer elements, that I would like to use within an angular 2 application. It seems like there's a problem concerning the content tag of the polymer element. The content of the element gets rendered at the wrong place within the polymer element, if the element is located within an angular 2 component. Example: The template of my polymer element "my-button" looks like this: Use outside angular When I use this element outside of my angular 2 component, I get the result that I expected: Use: Result: Use within angular 2 component When used within an angular 2 component, the content always gets rendered at the end of the elements template. Just like the content tag didn't exist. Use: Result: Question The problem might be, that polymer and angular 2 both use the content tag for transclution. So maybe things get a little messy when using both together. I would love to use all of my polymer elements inside angular 2. So any ideas on how to fix this would be very much appreciated. There are a few open issue about Angular2 combined with Polymer. For example Angular doesn't use An issue I haven't found a solution yet is passing Another issue is with See also Two-way binding in Angular 2 with NgModel and mutating bound property? 这篇关于角2分量内的聚合物元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< template> s（就像
有一个我试过似乎只是忽略 ngNonBindable 指令，我还没有在 < template ngNonBindable> 我自己，但它可能工作。 [prop] =field / prop ={{field}} 绑定。
< ; style is =custom-style> 。它们只能添加在< head> 元素或聚合元素中，但而不是Angular组件。
<template>
<button>
<content></content>
</button>
</template>
<my-button>Foo</my-button>
<my-button>
<button>
Foo
</button>
<my-button>
<my-button>Foo</my-button>
<my-button>
<button>
</button>
"Foo"
<my-button>
Polymer.dom(el)... for manipulating a Polymer elements children. This is probably what breaks your components.
A workaround is to enable full shadow DOM and polyfills. See https://www.polymer-project.org/1.0/docs/devguide/settings.html<template>s (like required for example for <iron-list>. Angular handles templates on its own and doesn't pass it to the Polymer element.There is a I tried it seems that's only to ignore ngNonBindable directive. I haven't tried it yet on the <template ngNonBindable> myself but it might work.[prop]="field"/prop="{{field}} bindings.<style is="custom-style">. They can only be added in the <head> element or within Polymer elements, but not to Angular components.
