#angular
#angular
Вопрос:
Обычный сценарий: пользователю отображается окно /login . Он входит в систему и перенаправляется на /dashboard, он также может загрузить список других пользователей по адресу /users path . Затем он нажимает на пользователя и попадает в путь /users/1 . Данные выбранных пользователей теперь отображаются на экране, поскольку они были предварительно загружены вместе со списком пользователей.
Родительский компонент — «/ users», дочерний путь — «: userId».
Необычный, но возможный сценарий: пользователь переходит непосредственно к пути /users/1, вставляя URL-адрес (токен входа все еще действителен, поэтому ему не требуется входить в систему).
На данный момент у нас нет ни загруженного списка пользователей, ни данных выбранных пользователей.
Я использую распознаватель путей для загрузки списка пользователей. Он загружает список до открытия пути. Проблема заключается в:userid дочерний путь. Я могу получить этот параметр только в конструкторе дочерних компонентов или методах инициализации.
Это нехорошо, потому что каждый компонент с дочерним путем должен извлечь этот параметр и «выбрать» соответствующего пользователя из списка.
Я хочу иметь возможность выбирать пользователя в одном месте.
Я попытался создать один распознаватель для каждого дочернего пути. Этот преобразователь пытается извлечь параметр :userid, а затем выбрать его. Я также пытался назначить этот преобразователь только для родительского пути. Я также попытался создать canActivate guard, который должен извлекать:userid.
Ни один из этих методов не дает никакого результата, потому что route[.snapshot].paramMap пуст.
Я даже пытался подписаться на paramMap маршрута, но результат тот же.
файл маршрутизатора
{ path: '/users', component: parentComponent, children: [
{ path: ':userid', component: userComponent, resolve: { user: SelectUserResolver } }
{ path: ':userid/edit', component: userEditComponent, resolve: { user: SelectUserResolver } }
{ path: ':userid/show, component: userShowComponent, resolve: { user: SelectUserResolver } }
..... many more paths .....
]
}
файл преобразователя
export class SelectUserResolver implement Resolve<any> {
constructor(private userService: UserService, private route: ActivatedRoute) {}
resolve() {
let userId = this.route.snaphot.paramMap.get('userid'); //<- empty map
this.userService.selectUser(userId);
}
}
ParentComponent
export class parentComponent {
constructor(private route: ActivatedRoute) {
let userId = this.route.snapshot.paramMap.get('userid'); //<- empty map
}
}
Пользовательский компонент
export class userComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
let userId = this.route.snapshot.paramMap.get('userid');// <- this works.
}
}
Я ожидаю, что у paramMap будет идентификатор пользователя, но он пуст, что бы я ни делал.
Доступ к нему внутри дочерних компонентов очень плох, потому что мне нужно будет повторно использовать этот код для каждого созданного компонента.
Комментарии:
1. Я не думаю, что вы вводите
ActivatedRoute
свой распознаватель. При реализацииResolve
он должен реализоватьсяresolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
. К которому затем вы можете получить доступroute.paramMap.get('userid')
2. Кажется, что
ActivatedRouteSnapshot
это не поставщик, ниRouterStateSnapshot
один из них, поэтому он не позволит мне вводить их. Затем снимок состояния маршрутизатора может быть получен путем инъекцииrotuer: Router
router.routerState.snapshot
. Но, похоже, ни один из них не работает так, как мне нужно. Я все еще не вижу параметров.3. вы не вводите
ActivatedRouteSnapshot
norRouterStateSnapshot
, это аргументы для вашейresolve(...)
функции.4. Спасибо. Кажется, что RouterStateSnapshot не требуется. Как только я добавил
ActivatedRouteSnapshot
в качествеresolve
параметра функции, я смог получить значение. Пожалуйста, отправьте свой ответ, чтобы я мог его принять.
Ответ №1:
Для преобразователей вы не вводите ActivatedRoute
свой конструктор. Согласно документации: https://angular.io/api/router/Resolve
При реализации Resolve<T>
вы можете получить маршрут из метода:
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T