Using RouterLink and State to pass an object from one component to another, after a refresh on...

https://stackblitz.com/edit/stackblitz-starters-cdffrt

The issue is after navigating to the person details component, if you refresh the page, this.person doesn't seem to know that it's a Person class, even though it's casted as a Person. You can't call the methods on the class because it doesn't know about them.

export class PersonDetailsComponent {
person: Person | null = null;

constructor(private readonly router: Router) {
const navigation = this.router.getCurrentNavigation();
if (navigation?.extras.state != null) {
this.person = navigation.extras.state['data'] as Person;
}
}
}


Here is an example of the problem.

Steps to reproduce the issue:

1. 
   Ensure you start at home
   
   
2. 
   Click Get Person Details link
   
   
3. 
   See that it gets the person's first name and last name AND is able to call the method on the class to display the full name.
   
   
4. 
   Then refresh the browser and notice it throws an exception saying that the getFullName is not defined.
   

It's already cast as a Person so I don't know what else I can do. Feels like maybe a flag or option needs to be configured in the angular router, but I'm obviously not sure.

When you navigate to the Person Details right from home, this.person instanceof Person returns true. After you refresh, that same code block returns false.

Continue reading...