角2成分内的聚合物元素
[英]Polymer elements within angular 2 component
问题描述
I have a set of custom polymer elements, that I would like to use within an angular 2 application. 
我有一套定制的聚合物元素，我想在角度2应用中使用。
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. 如果元件位于角度2分量内，则元件的内容在聚合物元件内的错误位置处被渲染。
Example: 例：
The template of my polymer element "my-button" looks like this: 我的聚合物元素“my-button”的模板如下所示：
<template>
<button>
<content></content>
</button>
</template>
Use outside angular 使用外角
When I use this element outside of my angular 2 component, I get the result that I expected: 当我在angular 2组件之外使用这个元素时，我得到了我期望的结果：
Use: 使用：
<my-button>Foo</my-button>
Result: 结果：
<my-button>
<button>
Foo
</button>
<my-button>
Use within angular 2 component 在角度2组件内使用
When used within an angular 2 component, the content always gets rendered at the end of the elements template. 在角度2组件中使用时，内容始终在元素模板的末尾呈现。 Just like the content tag didn't exist. 就像内容标签不存在一样。
Use: 使用：
<my-button>Foo</my-button>
Result: 结果：
<my-button>
<button>
</button>
"Foo"
<my-button>
Question 题
The problem might be, that polymer and angular 2 both use the content tag for transclution. 问题可能是，聚合物和角2都使用内容标签进行转录。 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. 我很想在角度2内使用我所有的聚合物元素。所以关于如何解决这个问题的任何想法都将非常感激。
2 个解决方案
解决方案1
8 已采纳 2016-01-14 05:23:38
There are a few open issue about Angular2 combined with Polymer. 有关Angular2与Polymer结合的一些未解决的问题。 For example Angular doesn't use Polymer.dom(el)... for manipulating a Polymer elements children. 例如，Angular不使用Polymer.dom(el)...来操作Polymer元素子元素。 This is probably what breaks your components. 这可能会破坏您的组件。 A workaround is to enable full shadow DOM and polyfills. 解决方法是启用完整的阴影DOM和polyfill。 See https://www.polymer-project.org/1.0/docs/devguide/settings.html 请参阅https://www.polymer-project.org/1.0/docs/devguide/settings.html
An issue I haven't found a solution yet is passing <template> s (like required for example for <iron-list> . Angular handles templates on its own and doesn't pass it to the Polymer element. 我还没有找到解决方案的问题是传递<template> s（例如<iron-list>例子..Angular自己处理模板并且不将它传递给Polymer元素。
There is a
ngNonBindable directive.
有一个
ngNonBindable指令。
I haven't tried it yet on the
<template ngNonBindable> myself but it might work.
我还没有在
I tried it seems that's only to ignore <template ngNonBindable>上尝试过它，但它可能会起作用。
[prop]="field" / prop="{{field}} bindings. 我试过似乎只是忽略[prop]="field" / prop="{{field}}绑定。
Another issue is with <style is="custom-style"> . 另一个问题是<style is="custom-style"> 。 They can only be added in the <head> element or within Polymer elements, but not to Angular components. 它们只能添加到<head>元素或Polymer元素中，而不能添加到Angular组件中。
See also Two-way binding in Angular 2 with NgModel and mutating bound property? 另请参阅Angular 2中的NgModel和变异绑定属性的双向绑定？
解决方案2
7 2016-05-24 13:46:00
Check out https://www.npmjs.com/package/@vaadin/angular2-polymer , which should resolve most issues in integrating Polymer elements to Angular 2. 查看https://www.npmjs.com/package/@vaadin/angular2-polymer ，它可以解决将Polymer元素集成到Angular 2中的大多数问题。
User guide: https://github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc 用户指南： https ： //github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc
Tutorial (draft): https://github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc 教程（草案）： https ： //github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc
Better shady DOM support is waiting to be merged from a separate branch (should be merged and released within two weeks): https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter 更好的阴影DOM支持等待从一个单独的分支合并（应该在两周内合并和发布）： https ： //github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter
It would be great if you could try it out and see if it works for you! 如果你能尝试一下，看看它是否适合你，那就太好了！
Eventually, the documentation will be published at https://vaadin.com/docs/ 最终，文档将发布在https://vaadin.com/docs/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.