Question

我是新手，对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个选项，可以在模板中使用一次异步管道并为其添加别名

35.200.201.56

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

注意，您需要使用<div *ngIf="(person | async) as personObj"> <p> profile works {{personObj.profileUrl}}! name {{personObj.name}} // and so on </p> </div>检查模板中的属性，因为在初始化时它将是不确定的，因为它将被异步分配，并且不要忘记也取消订阅

Answer 2

在.ts中：

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

在模板中：

 profile works {{person.profileUrl}}

或其他任何亲人道具

模板中可观察到的访问，而无需每次都使用安全导航操作符和异步管道

某些上下文

这是如何实现的？

问题

2 个答案: