javascript - 将 Angular 对象绑定(bind)到聚合物1.0

我有一个自定义元素：

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

这样，Web组件中的ready回调仅收到{{myOptions}}属性的options。我尝试了一些工具，但都没有用。

然后，我阅读here，您可以执行一个回调，该回调将在属性更改后触发（attributeChangedCallback），所以我做了一些破解，将ready回调推迟到该回调上的布尔标志设置为true时，但这丑陋的修复。

另外-它仅适用于Chrome。

有人可以分享使Angular绑定到Polymer的最佳跨浏览器解决方案吗？

最佳答案

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

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

要使Polymer避免以后对myOptions属性的更改，可以延迟将值分配给myOptions，直到在Angular侧完全构建该值为止。如果您传递一个对象并更改该对象的属性，则Angular无法识别它。

您还可以使用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);
  }
}