Доступ к Observable в шаблоне без использования оператора безопасной навигации и асинхронного конвейера каждый раз

Question

Я новичок в angular и немного борюсь с rxjs и всеми асинхронными вещами.

Немного контекста

Допустим, у вас есть веб-сайт, например, Facebook с профилями.Вы можете перейти к профилю, перейдя на website.com/profiles/profileUrl.Точно так же при нажатии на профиль вы получаете маршрут к 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

In .ts:

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

В шаблоне:

 profile works {{person.profileUrl}}

Или любой другой реквизит лично

Answer 2

хорошо, у вас есть 2 варианта: один, чтобы использовать асинхронный канал в шаблоне и добавить псевдоним для него

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

другой вариант - подписаться на компонент и сохранить объект персонажа в свойстве внутри подписки и использовать его.свойство в шаблоне.

ПРИМЕЧАНИЕ , что вам нужно проверить это свойство в шаблоне с помощью *ngIf, потому что при инициализации оно будет неопределенным, поскольку оно будет назначено асинхронно, и не забудьтеОтписаться тоже