无需每次都使用安全导航运算符和异步管道即可在模板中访问 Observable

Question

我是 angular 的新手，对 rxjs 和所有正在进行的异步操作有点费劲。

一些上下文

假设您有一个像 facebook 这样的带有配置文件的网站。您可以通过导航到 website.com/profiles/profileUrl 来访问个人资料。同样，当您点击个人资料时，您会以 Angular 的方式转到 profiles/:profileUrl。

这是如何实现的？

我路由到 PersonProfileComponent 并从后端检索配置文件数据，两者都基于 profileUrl:

组件:

export class PersonProfileComponent implements OnInit {
  person: Observable<PersonTO>;

  constructor(private route: ActivatedRoute,
  private mockDataService: MockPersonService) {}

  ngOnInit() {
     this.route.params.subscribe(params => {
        this.initializePerson(params['profileUrl']);
     });
  }

  initializePerson(profileUrl: string) {
     this.mockDataService.getFullPersonByProfilUrl(profileUrl).
     subscribe(foundPerson => {
         this.person = of(foundPerson);
     });
  }
}

模板:

<p>
   profile works {{(person | async)?.profileUrl}}!
</p>

问题

虽然一切正常，但我最不喜欢模板“(person | async)?.profileUrl”中的这一部分。 person 对象可以变得非常大，具有许多属性，我无法想象像这样访问每个属性。只是感觉不对。有没有办法在仍然使用异步管道的同时解决这个问题，因为它会为我处理所有订阅和取消订阅？此外，我感谢对这个片段的任何批评以及如何更好地实施它！

Answer 1

好的，这里有 2 个选项，一个是在模板中使用一次异步管道并为其添加别名

<div *ngIf="(person | async) as personObj">
   <p>
      profile works {{personObj.profileUrl}}!
      name {{personObj.name}} // and so on
   </p>
</div>

另一种选择是在组件中订阅并将人员对象保存在订阅内的属性中，并在模板中使用该属性。

注意您需要使用 *ngIf 检查模板中的属性因为在初始化时它将是未定义的，因为它将被异步分配，并且别忘了取消订阅

Answer 2

在 .ts 中：

 ...
 this.person = foundPerson;
 ...

在模板中：

 profile works {{person.profileUrl}}

或本人任何其他道具

无需每次都使用安全导航运算符和异步管道即可在模板中访问 Observable

Access Observable in the Template without using the Safe Navigation Operator and Async Pipe Everytime

angular

asynchronous

rxjs

observable

safe-navigation-operator

一些上下文

这是如何实现的？

问题