Mój problem jest dość klasyczny. Mam prywatną część aplikacji, która znajduje się za plikiem login form
. Po pomyślnym zalogowaniu następuje przejście do trasy podrzędnej dla aplikacji administratora.
Mój problem polega na tym, że nie mogę użyć, global navigation menu
ponieważ router próbuje trasować w moim AdminComponent
zamiast moim AppCompoment
. Więc moja nawigacja jest zepsuta.
Innym problemem jest to, że jeśli ktoś chce uzyskać bezpośredni dostęp do adresu URL, chcę przekierować do nadrzędnej trasy „logowania”. Ale nie mogę sprawić, żeby to zadziałało. Wydaje mi się, że te dwie kwestie są podobne.
Masz jakiś pomysł, jak to zrobić?
angular
angular-routing
angular-router
Carl Boisvert
źródło
źródło
Odpowiedzi:
Czy chcesz link / HTML, czy chcesz kierować bezwzględnie / w kodzie?
Link : Dyrektywa RouterLink zawsze traktuje podane łącze jako różnicę do bieżącego adresu 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"
W przypadku RouterLink pamiętaj, aby zaimportować i używać
directives
tablicy:import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ directives: [ROUTER_DIRECTIVES],
Tryb konieczny :
navigate()
metoda wymaga punktu początkowego (tj.relativeTo
Parametru). Jeśli nie podano, nawigacja jest bezwzględna: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});
źródło
router.navigate(string)
metoda nie wydaje się istnieć w obecnej wersji kątowej (2.2). Szukałem w dokumentach i tylko znalazłemnavigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
. A może całkowicie czegoś mi brakuje?relativeTo
dane, gdy używasz [routerLink] w html zamiast maszynopisu?../../../
zamiast../
nawigować do rodzica ('/users'
z'/users/1'
).To wydaje się działać dla mnie od wiosny 2017 r .:
Tam, gdzie Twój komponent akceptuje
ActivatedRoute
iRouter
importuje w następujący sposób:import { ActivatedRoute, Router } from '@angular/router';
źródło
parentPath
'work: queue' (który ma dzieci) i wspomniane dzieci ładują moduł potomny z parametrami.fullCurrentPath
: „praca / wysyłka / moduł / lista”. Powyższego kodu nie można załadowaćparentPath
zfullCurrentPath
.W ten sposób możesz przejść do głównego katalogu głównego
Będziesz musiał wstrzyknąć bieżącą aktywną trasę do konstruktora
źródło
this.router.navigate(['.'], {relativeTo: this.activeRoute.parent});
będzie działał poprawnie w przypadku, gdy użyjesz tego samego komponentu w dwóch ścieżkach: / users / create i / users / edit / 123. W obu przypadkach przejdzie do rodzica / użytkowników. Zwykła nawigacjathis.router.navigate([".."], {relativeTo: this.activeRoute})
będzie działać tylko dla użytkowników / create, ale nie będzie działać dla użytkowników / edit / 123, ponieważ będzie nawigować do nieistniejących / users / edit / route.Router obsługuje
/xxx
- uruchamiane na routerze komponentu głównegoxxx
- uruchamiane na routerze bieżącego komponentu../xxx
- rozpoczęte na routerze nadrzędnym bieżącego komponentuźródło
../
jest wystarczająco dobrze znany, ale ostatecznie jest to nadal niejednoznaczne. Dzięki za podpowiedź.Aby nawigować do komponentu nadrzędnego niezależnie od liczby parametrów w bieżącej trasie lub trasie nadrzędnej: Angular 6 aktualizacja 21.01.2019
Ma to dodatkową zaletę, że jest trasą absolutną, której można używać z pojedynczym routerem.
(Na pewno Angular 4+, prawdopodobnie też Angular 2.)
źródło
this._router.navigate([])
, whilethis._router.navigate([[]])
zabiera do trasy nadrzędnej wtedy i tylko wtedy, gdy trasa nadrzędna nie jest sama w sobie rootem.Inny sposób mógłby wyglądać tak
a oto konstruktor
źródło
bez zbędnych ceregieli:
parametr '..' sprawia , że nawigacja jest o jeden poziom wyżej, czyli rodzic :)
źródło
Moje trasy mają następujący wzór:
Na przykład, gdy jestem na stronie edycji i muszę wrócić do strony z listą, wrócę o 2 poziomy wyżej na trasie.
Myśląc o tym, stworzyłem moją metodę z parametrem „level”.
Aby przejść od edycji do listy, wywołuję tę metodę:
źródło
dodaj lokalizację do konstruktora z
@angular/common
dodaj funkcję wstecz:
a następnie Twoim zdaniem:
źródło
Jeśli używasz dyrektywy uiSref, możesz to zrobić
źródło
Moje rozwiązanie to:
I
Router
wtrysk:źródło