כשאנחנו מקבלים מידע חיצוני, הפעולה יכולה לקחת זמן ובינתיים נטען עמוד ריק.
אנחנו רוצים שהעמוד לא יטען עד שלא יהיה בו כל המידע הנדרש.
יצירת ה-resolver:
ng generate r users
פונקצית ה-resolve מחזירה מידע. אנחנו רוצים את המידע הזה לפני שהעמוד נטען.
נקח את ה-service שאיתו אנחנו שולפים את המידע ונקבל את המידע בתוך ה-resolve.
user.service.ts
getAllUsers(): any{
const userList = new Promise((resolve, reject) => {
resolve(this.users);
})
return userList;
}
users.resolver
constructor(private userService: UserService){}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
return this.userService.getAllUsers().then(data => {
return data;
})
}
את ה-resolver צריך להוסיף ל-providers של ה-app.
השלב הבא יהיה להפעיל את ה-resolver על הנתיב המתאים.
app.module
{ path: 'users', component: AllUsersComponent, resolve: {users: UsersResolver} },
המשתנה users יחזיק את המידע שהתקבל מה-service.
כדי להשתמש בו בקומפוננטה:
all-users.component
users: Users[];
constructor(private userService: UserService, private route: ActivatedRoute) {}
ngOnInit(): void {
this.users = this.route.snapshot.data['users'];
}