自定义元素（聚合物）属性绑定到 Angular 9 中的 RxJS Observable答案

【问题标题】：Custom element(Polymer) property binding to an RxJS Observable in Angular 9自定义元素（聚合物）属性绑定到 Angular 9 中的 RxJS Observable
【发布时间】：2020-07-13 17:39:11
【问题描述】：

我有一个 Angular 9 应用程序，其中 Angular 组件属性绑定到 RxJS 可观察对象。在这里，我试图用 Polymer 自定义元素（纸张输入）替换 Angular 组件。

我的观察结果是什么？ 我无法将自定义元素属性与 RxJS 可观察对象绑定，而我可以使用 Angular 组件属性。

如何重现？ 为了展示我所面临的情况，我将带有自定义元素（纸张输入）的 stackblitz 示例绑定到可观察对象。

app.component.html

<paper-input [label]="price$ | async" ></paper-input>

app.component.ts

import { Observable } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent  {
  price: Observable<string>;
  
  constructor() {
      this.price = Observable.of("230$");
  }
}

完整代码： https://stackblitz.com/edit/angular-examples-mu72vs

期望我能够将纸张输入（Polymer）的标签属性绑定到 Observable，并且当有更改时会反映到自定义元素属性。实际上，我没有看到反映到标签属性的更改，它是空的。

这里我假设 observable 订阅将作为 AsyncPipe 的一部分使用 while 绑定发生。但自定义元素属性不会发生这种情况。

使用 RxJS Observables 实现自定义元素属性绑定的最佳方式是什么？

问候巴桑特

【问题讨论】：

标签： angular rxjs polymer web-component

【解决方案1】：

现在它可以工作了，我的 Angular 代码有一个小错误。基本上就是我声明和使用 observable 的方式。我们应该使用 '$' 符号将其指示为可观察变量。

即通过以下更改，它工作正常。

export class AppComponent  {
  price$: Observable<string>;
  
  constructor() {
      this.price$ = Observable.of("230$");
  }
}

我怀疑带有 CustomELement 的 aync 管道，但是使用带有 Polymer Custom ELements 的 async 管道没有问题。

你可以在这里找到工作示例@https://stackblitz.com/edit/angular-examples-udy8qe

谢谢

巴桑特

【讨论】：