Sim*_*mon 7 html javascript web-component polymer angular
我有一套定制的聚合物元素,我想在角度2应用中使用.
似乎聚合物元件的内容标签存在问题.如果元件位于角度2分量内,则元件的内容在聚合物元件内的错误位置处被渲染.
例:
我的聚合物元素"my-button"的模板如下所示:
<template>
<button>
<content></content>
</button>
</template>
使用外角
当我在angular 2组件之外使用这个元素时,我得到了我期望的结果:
使用:
<my-button>Foo</my-button>
结果:
<my-button>
<button>
Foo
</button>
<my-button>
在角度2组件内使用
在角度2组件中使用时,内容始终在元素模板的末尾呈现.就像内容标签不存在一样.
使用:
<my-button>Foo</my-button>
结果:
<my-button>
<button>
</button>
"Foo"
<my-button>
题
问题可能是,聚合物和角2都使用内容标签进行转录.因此,将两者结合使用时,事情可能会变得有些混乱.
我很想在角度2内使用我所有的聚合物元素.所以关于如何解决这个问题的任何想法都将非常感激.
有关Angular2与Polymer结合的一些未解决的问题.例如,Angular不Polymer.dom(el)...用于操纵Polymer元素子元素.这可能会破坏您的组件.解决方法是启用完整的阴影DOM和polyfill.请参阅https://www.polymer-project.org/1.0/docs/devguide/settings.html
我还没有找到解决方案的一个问题是传递<template>s(例如,需要<iron-list>角度处理模板,并且不会将它传递给Polymer元素.
有我试过它似乎只是忽略ngNonBindable指令.我还没有尝试过它,<template ngNonBindable>但它可能会起作用.[prop]="field"/ prop="{{field}}绑定.
另一个问题是<style is="custom-style">.它们只能添加到<head>元素中或Polymer元素中,但不能添加到Angular组件中.
另请参阅Angular 2中的NgModel和变异绑定属性的双向绑定？
查看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/