Now, let's refactor the viewUser
component, so that we can reuse it in multiple contexts. One where it can load its own data using a resolve guard, suitable for a master/detail view and another, where we can bind the current user to it, as we have done in the Review step of the multi-step input form we built in the prior section:
- Update
viewUser
component with the following changes:
src/app/user/view-user/view-user.component.ts ... import { ActivatedRoute } from '@angular/router' export class ViewUserComponent implements OnChanges, OnInit { ... constructor(private route: ActivatedRoute) {} ngOnInit() { if (this.route.snapshot && this.route.snapshot.data['user']) { this.currentUser = User.BuildUser(this.route.snapshot.data['user']) this.currentUser.dateOfBirth = Date.now() // for data mocking purposes only } } ...
We now have two independent events. One for ngOnChanges
, which handles what value gets assigned...