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

Question

我是 Angular 的新手，在 rxjs 和所有异步的事情上遇到了一些困难。

一些背景

假设您有一个像 facebook 这样的带有个人资料的网站。您可以通过导航至 来访问个人资料website.com/profiles/profileUrl。同样，当单击个人资料时，您会转到profiles/:profileUrlAngular 术语的路由。

这是如何实施的？

我路由到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，因为在初始化时它将是未定义的，因为它将异步分配，并且也不要忘记取消订阅