[英]Binding Angular Object to Polymer 1.0
I have an custom element: 我有一个自定义元素:
<my-element options='{{myOptions}}'></my-element>
Like this, the ready
callback in the web component just receives {{myOptions}}
for the options
property. 像这样,Web组件中的ready
回调仅接收options
属性的{{myOptions}}
。 I've tried some tools, none worked. 我尝试了一些工具,但都没有用。
I then read here that you can do a callback that will trigger once the property was changed (attributeChangedCallback), so I did some hack that postpones the ready
callback until a boolean flag is set to true on that callback, but that's an ugly fix. 然后我在这里读到,您可以执行一个回调,该回调将在属性更改后触发(attributeChangedCallback),所以我做了一些破解,将ready
回调推迟到该回调的布尔标志设置为true时,但这是一个丑陋的解决方案。
Also - it only works with Chrome. 另外-它仅适用于Chrome。
Can someone share what's the best cross-browser solution to make the Angular bind to Polymer ? 有人可以分享使Angular绑定到Polymer的最佳跨浏览器解决方案吗?
<my-element options='{{myOptions}}'></my-element>
binds myOptions
stringyfied, for object binding use <my-element options='{{myOptions}}'></my-element>
绑定myOptions
字符串,供对象绑定使用
<my-element [options]='myOptions'></my-element>
To make Polymer awar of later changes to a property of myOptions
you can delay the assignment of the value to myOptions
until it is fully built on the Angular side. 为了使Polymer避免以后对myOptions
的属性进行更改,您可以延迟将值分配给myOptions
直到将其完全构建在Angular一侧。 If you pass an object and change a property of that object, Angular doesn't recognize it. 如果您传递一个对象并更改该对象的属性,则Angular无法识别它。
You could also explicitly notify the Polymer element about the change using Polymers API 您还可以使用Polymers API明确通知Polymer元素有关更改的信息
@Component({
selector: 'angular-comp',
template: `
<my-element #options options='{{myOptions}}'></my-element>
`
export class AngularComponent {
@ViewChild('options') options;
constructor() {
this.options = {};
}
myOptions:any;
// or some event handler or similar that isn't called before ngAfterViewInit (for example click, ...)
ngAfterViewInit() {
this.options.someProp = "someValue";
options.set('options.someProp', this.options.someProp);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.