Моя проблема вполне классическая. У меня есть личная часть приложения, которая находится за файлом login form
. При успешном входе в систему он переходит на дочерний маршрут для приложения администратора.
Моя проблема в том, что я не могу использовать, global navigation menu
потому что маршрутизатор пытается маршрутизировать в моем, AdminComponent
а не в моем AppCompoment
. Так что у меня сломана навигация.
Другая проблема заключается в том, что если кто-то хочет получить доступ к URL напрямую, я хочу перенаправить на родительский маршрут «входа в систему». Но я не могу заставить его работать. Мне кажется, что эти две проблемы похожи.
Есть идеи, как это можно сделать?
angular
angular-routing
angular-router
Карл Бойсверт
источник
источник
Ответы:
Вам нужна ссылка / HTML или вы хотите выполнить императивную маршрутизацию / в коде?
Ссылка : директива RouterLink всегда рассматривает предоставленную ссылку как дельту к текущему URL-адресу:
[routerLink]="['/absolute']" [routerLink]="['../../parent']" [routerLink]="['../sibling']" [routerLink]="['./child']" // or [routerLink]="['child']" // with route param ../../parent;abc=xyz [routerLink]="['../../parent', {abc: 'xyz'}]" // with query param and fragment ../../parent?p1=value1&p2=v2#frag [routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"
С RouterLink не забудьте импортировать и использовать
directives
массив:import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ directives: [ROUTER_DIRECTIVES],
Императив :
navigate()
метод требует отправной точки (то есть,relativeTo
параметр). Если ничего не указано, навигация будет абсолютной:import { Router, ActivatedRoute } from '@angular/router'; ... constructor(private router: Router, private route: ActivatedRoute) {} ... this.router.navigate(["/absolute/path"]); this.router.navigate(["../../parent"], {relativeTo: this.route}); this.router.navigate(["../sibling"], {relativeTo: this.route}); this.router.navigate(["./child"], {relativeTo: this.route}); // or this.router.navigate(["child"], {relativeTo: this.route}); // with route param ../../parent;abc=xyz this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route}); // with query param and fragment ../../parent?p1=value1&p2=v2#frag this.router.navigate(["../../parent"], {relativeTo: this.route, queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'}); // navigate without updating the URL this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});
источник
router.navigate(string)
метод, похоже, не существует в текущей версии Angular (2.2). Искал в документации и только нашелnavigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
. Или мне что-то совсем не хватает?relativeTo
данные, когда вы используете [routerLink] в HTML вместо машинописного текста?../../../
вместо../
перехода к родительскому ('/users'
от'/users/1'
).Кажется, это работает для меня весной 2017 года:
Если ваш компонент ctor принимает
ActivatedRoute
иRouter
импортируется следующим образом:import { ActivatedRoute, Router } from '@angular/router';
источник
parentPath
'work: queue' (у которого есть дочерние элементы) и сказал, что дети загружают дочерний модуль с параметрами.fullCurrentPath
: 'работа / доставка / модуль / список'. Приведенный выше код не может загружатьсяparentPath
изfullCurrentPath
.Вы можете перейти к родительскому корню следующим образом
Вам нужно будет ввести текущий активный маршрут в конструктор
источник
this.router.navigate(['.'], {relativeTo: this.activeRoute.parent});
будет работать правильно в случае, когда вы используете один и тот же компонент в двух путях: / users / create и / users / edit / 123. В обоих случаях он перейдет к родительскому элементу / пользователям. Обычная навигация сthis.router.navigate([".."], {relativeTo: this.activeRoute})
будет работать только для пользователей / create, но не будет работать для пользователей / edit / 123, потому что она перейдет к несуществующим / users / edit / route.Маршрутизатор поддерживает
/xxx
- запускаются на маршрутизаторе корневого компонентаxxx
- запущены на маршрутизаторе текущего компонента../xxx
- запущены на родительском маршрутизаторе текущего компонентаисточник
../
это достаточно хорошо известно, но в итоге все еще неоднозначно. Спасибо за подсказку.Чтобы перейти к родительскому компоненту независимо от количества параметров в текущем маршруте или родительском маршруте: Обновление Angular 6 21.01.19
Это дает дополнительный бонус в виде абсолютного маршрута, который вы можете использовать с одноэлементным маршрутизатором.
(Angular 4+ наверняка, возможно, Angular 2 тоже.)
источник
this._router.navigate([])
и приthis._router.navigate([[]])
переходе к родительскому маршруту тогда и только тогда, когда родительский маршрут сам не является корневым.Другой способ мог быть таким
а вот конструктор
источник
без лишних слов:
параметр '..' делает навигацию на один уровень выше, т.е. родительский :)
источник
Мои маршруты имеют такую схему:
Например, когда я нахожусь на странице редактирования и мне нужно вернуться на страницу списка, я вернусь на 2 уровня вверх по маршруту.
Подумав об этом, я создал свой метод с параметром «уровень».
Итак, чтобы перейти от редактирования к списку, я вызываю такой метод:
источник
добавить Location в свой конструктор из
@angular/common
добавить функцию возврата:
а затем, на ваш взгляд:
источник
Если вы используете директиву uiSref, вы можете сделать это
источник
Мое решение:
И
Router
инъекция:источник