将角物体与聚合物 1.0 结合

Binding Angular Object to Polymer 1.0

本文关键字：结合 聚合物      更新时间：2023-09-26

我有一个自定义元素：

<my-element options='{{myOptions}}'></my-element>

像这样，Web 组件中的ready回调只接收 options 属性的{{myOptions}}。我尝试了一些工具，但没有一个有效。

然后我在这里读到，你可以做一个回调，一旦属性被更改（attributeChangedCallback），就会触发，所以我做了一些技巧，推迟ready回调，直到布尔标志在该回调上设置为 true，但这是一个丑陋的修复。

另外 - 它仅适用于 Chrome。

有人可以分享什么是使 Angular 绑定到聚合物的最佳跨浏览器解决方案？

<my-element options='{{myOptions}}'></my-element>绑定myOptions字符串化，用于对象绑定

<my-element [options]='myOptions'></my-element>

要使聚合物在以后对myOptions属性的更改中展开，您可以延迟将值分配给myOptions，直到它在 Angular 端完全构建。如果您传递一个对象并更改该对象的属性，Angular 将无法识别它。

您还可以使用 Polymers API 明确通知聚合物元素有关更改的信息

@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);
  }
}
相关文章：