Angular：在组件类中使用来自异步管道的数据答案

【问题标题】：Angular: Using data from async pipe in component classAngular：在组件类中使用来自异步管道的数据
【发布时间】：2022-11-07 20:03:24
【问题描述】：

我有些担心哪种是将我观察到的数据从模板传递到外部模态的最佳方法。数据将在异步管道的帮助下显示在模板中。模板和模态中也需要订阅的数据。

<ng-container *ngIf="possibleTokens$ | async as possibleTokens">

  <!-- do some other things with possibleTokens -->

  <button type="button" (click)="openEditModal(possibleTokens)">edit</button>
  <button type="button" (click)="duplicateRow(row, possibleTokens)">duplicate</button>
  <button type="button" (click)="openCreateModal(possibleTokens)">create</button>
</ng-container>

export class BadgeOverviewExample {
  possibleTokens$ = this.getPossibleTokensFromServer();

  openCreateModal(possibleTokens: string[]): void {
    console.log('open create modal with following tokens:');
    console.log(possibleTokens);
    // const modal = modal.open(...);
    // modal.possibleTokens = possibleTokens;
  }
}

由于异步管道，我无法直接访问组件类中的数据。我将数据传递到模态的唯一想法是将模板中的数据也传递到所有需要的方法中。

处理此类案件的首选方式是什么？

在这种情况下我应该摆脱异步管道并直接在组件的类中订阅（）吗？我个人不想使用 subscribe() 来获取数据，因为异步管道应该是首选方式。但也许它不适合这样的用例？

我应该将 Observable 结果通过管道传输到私有变量中吗？我认为这也会与反应方式冲突吗？

private _possibleTokens = [];      
possibleTokens$ = this.getPossibleTokensFromServer()
  .pipe( 
    tap(tokens => this._possibleTokens = tokens)
  );
);

// and now use this._possibleTokens in the component's class and get rid of the method parameters.

openCreateModal(): void {
  console.log('open create modal with following tokens:');
  console.log(this._possibleTokens);
  // const modal = modal.open(...);
  // modal.possibleTokens = this._possibleTokens;
}

我应该保留我的解决方案吗？但是随着更多的动作进入页面，我将不得不为每个需要它的方法传递变量。

这是一个 Stackblitz：https://stackblitz.com/edit/angular-duc6if-66yyed?file=src%2Fapp%2Fbadge-overview-example.ts,src%2Fapp%2Fbadge-overview-example.html

【问题讨论】：

是的，我认为您应该保留它，将参数从模板传递给事件处理程序
即使我有 10 行或更多行必须将参数传递给组件？
是的，最好

标签： angular rxjs observable async-pipe

【解决方案1】：

您可以结合 operator shareReplay（用于缓存结果）和 firstValueFrom（在 ts 代码中异步读取数据）。在这种情况下，由于使用了 shareReplay 运算符，只会触发一次 http 调用。因此，您的代码将如下所示：

possibleTokens$ = this.getPossibleTokensFromServer().pipe(shareReplay())

async openCreateModal(): Promise<void> {
  const tokens = await firstValueFrom(this.possibleTokens$);
  // do something with data
}

【讨论】：