Связанная модель машинописного текста исчезает, когда данные передаются на другую страницу

Question

Я создал машинописную модель в приложении angular. Инициализировал объект этой моделью. Я передаю объект через маршрутизацию, но во втором компоненте (например, UserComponent) связанные типы не являются avialbe (выделены на изображении). Ниже приведены фрагменты кода. URL-адрес Stackblitz: https://stackblitz.com/edit/tsmodel-test

Модель

export class UserModel{
  name: string;
  id: number;
}

1-й компонент

export class HelloComponent  { 
  user = new UserModel(); 

  constructor(private router: Router){}

  ngOnInit() {
    this.user.name = 'abdc';
    this.user.id = 23232
    console.log(this.user)
  }

  btnClick() {
    this.router.navigate(['user'], { state: {data: this.user} });
  }
}

2-й компонент

export class UserComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}
  user;
  ngOnInit() {
    console.log('Component2')
    console.log(history.state.data);
    this.user = history.state.data;
  }
}

Выход

Answer 1

Это потому, что тип history.state.data любой. Он не может содержать конкретный тип данных c, поскольку является его произвольным. Если вы хотите получить доступ к данным как к типу UserModel, сделайте следующее в файле user.component.ts

 user: UserModel = new UserModel();
 ngOnInit() {
    this.user = history.state.data;
  }

Примечание: передача данных между компонентами может быть выполнена лучше. чем передача данных состояния

Обновление

user: UserModel = new UserModel();
  ngOnInit() {
    this.user = Object.assign(new UserModel, history.state.data);
    console.log(this.user);
  }

Answer 2

в консоли отображается не машинописный тип, а javascript класс UserModel. После этого вы получаете состояние объекта History, я думаю, что это копия объекта (для проверки). Это неправильный способ передавать объект между двумя компонентами