Как получить параметры перед инициализацией дочернего компонента

#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 nor RouterStateSnapshot , это аргументы для вашей 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