2

我是 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 对象可以变得非常大，具有许多属性，我无法想象像这样访问每个属性。就是感觉不对。在仍然使用异步管道的同时有没有办法解决这个问题，因为它会为我处理所有订阅和取消订阅？此外，我感谢任何关于此代码段以及如何更好地实施它的批评！

4

2 回答 2

2

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

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

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

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

于 2018-11-28T16:40:47.547 回答
-1

在 .ts 中：

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

在模板中：

 profile works {{person.profileUrl}}

或任何其他道具亲自

于 2018-11-28T16:41:03.020 回答