javascript - 将 Angular 物体绑定(bind)到 Polymer 1.0

Question

我有一个自定义元素:

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

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

然后我读了here您可以执行一个回调，该回调将在属性更改后触发(attributeChangedCallback)，因此我做了一些修改，推迟了就绪回调，直到该回调上的 bool 标志设置为 true，但这是一个丑陋的修复。

此外 - 它仅适用于 Chrome。

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

Answer 1

<my-element options='{{myOptions}}'></my-element>绑定(bind)myOptions stringyfied，用于对象绑定(bind)使用

<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);
  }
}