时间戳

首页 > 解决方案 > 自定义元素（聚合物）属性绑定到 Angular 9 中的 RxJS Observable

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

问题描述

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

我的观察是什么？ 我无法将自定义元素属性与 RxJS observables 绑定，而我可以使用 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 实现自定义元素属性绑定的最佳方法是什么？

问候巴桑特

标签： angularrxjspolymerweb-component

解决方案

现在它正在工作，我的 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

谢谢

巴桑特

推荐阅读