передавать данные между компонентами в angular

Question

Я пытаюсь добавить компонент панели мониторинга и пытаюсь передать ему информацию о пользователе. Я объявляю в dashboard.component.ts user: User, у которого есть своя собственная модель, и в нг я объявил ее как:

this.route.data.subscribe(data => {
      this.user = data['user'];
    });

теперь, когда я вызываю в html как {{user. firstName}} я получаю эту ошибку

ERROR TypeError: Cannot read property 'firstName' of undefined
    at Object.eval [as updateRenderer] (DashboardTopbarComponent.html:213)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:36090)
    at checkAndUpdateView (core.js:35073)
    at callViewAction (core.js:35433)
    at execComponentViewsAction (core.js:35361)
    at checkAndUpdateView (core.js:35074)
    at callViewAction (core.js:35433)
    at execComponentViewsAction (core.js:35361)
    at checkAndUpdateView (core.js:35074)
    at callViewAction (core.js:35433)

Это мой файл dashboard.component.ts

export class DashboardTopbarComponent implements OnInit {
  user: User;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.user = data['user'];
    });
  }
}

Answer 1

Вы должны инициализировать пользователя в контроллере

user:User = {}

или проверить, существует ли пользователь в файле HTML, попробуйте это

{{user && user.firstName}} 

Answer 2

Вы должны помнить, что js является однопоточным языком. Даже если вы подписались на data и в качестве функции обратного вызова передайте функцию, которая установит ваш user, пользователь будет установлен только после Angular fini sh рендеринга вашего компонента, поэтому вы пытаетесь получить поле firstName, в то время как ваш объект нулевой / неопределенный. Что вам нужно сделать, это взять user из snapshot и затем подписаться на data (да, он будет вызываться дважды, но вы будете обрабатывать случай, когда пользователь каким-либо образом изменится), или обернуть ваш шаблон с помощью ngIf ,