如何在管道异步和组件中使用对象？

Question

我需要两次使用可观察的参考。 在HTML中：

<div *ngIf="subject$ | async as subject">

在模板中：

this.subject = subject

Answer 1

您可以使用 .pipe> .pipe（） 将数据， 然后使用 tap（） 将值提取到组件中存在的变量中。

@Component({
  template: `
    <div *ngIf="subject$ | async as subject">
      <!-- do something with "subject" -->
      <span>{{subject.someProp}}</span>
    </div>
  `
})
export class MyComponent {
  // Used within the typescript
  subject = '';

  // Used within the html
  // Assuming data is retrieved through some sort of service
  subject$ = this.service.getData().pipe(
    tap(i => this.subject = i)
  )
}

Answer 2

如果您想获得代码中的值，

this.subject$.subscribe((value) => this.subject = value);

我想您需要订阅，这是您的进程；但是，Alias 作为主题仅在标签内部存在。

您应该使用 share（） >确保您不会触发两次的东西（例如服务器请求）：

private subject$ = new Subject<any>();
public observable$ = this.subject$.map(share());

其他好处是可观察现在是可观察到的无法在“消耗代码”上发出新值。

Answer 3

希望该解决方案可以帮助您了解如何使用可观察的两次 https://stackblitz.com/edit/angular-ivy-jgcgnf?file=src/app/app/app/app.component.ts