Angular 2 - Jak nawigować do innej trasy za pomocą this.router.parent.navigate ('/ about')?

186

Angular 2 - Jak nawigować do innej trasy za pomocą this.router.parent.navigate('/about').

Wydaje się, że to nie działa. Próbowałem, location.go("/about");ponieważ to nie działało.

Zasadniczo po zalogowaniu się użytkownika chcę przekierować go na inną stronę.

Oto mój kod poniżej:

 import {Component} from 'angular2/angular2';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
 import {Router} from 'angular2/router';

 import {AuthService} from '../../authService';

 //Model
 class User {
   constructor(public email: string, public password: string) {}
 }

 @Component({
   templateUrl:'src/app/components/todo/todo.html',
   directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
 })

 export class Todo {   
     model = new User('[email protected]', 'Password'); 
     authService:AuthService;
     router: Router;

   constructor(_router: Router, _authService: AuthService){   
       this.authService = _authService;
       this.router = _router;
   }

   onLogin = () => {
       this.authService.logUserIn(this.model).then((success) => {      

          //This is where its broke - below:          
          this.router.parent.navigate('/about');

       });
   }
 }
AngularM
źródło
Ponadto ustawiłem konfigurację trasy w moim pliku app.ts tak: @RouteConfig ([{ścieżka: '/', redirectTo: '/ home'}, {ścieżka: '/ home', komponent: Todo, as : „Strona główna”}, {ścieżka: „/ about”, komponent: About, as: „About”}])
AngularM
powinieneś usunąć /swoje ścieżki, ponieważ nie jest to wymagane
mast3rd3mon

Odpowiedzi:

318

Bezwzględne kierowanie ścieżką

Istnieją 2 metody nawigacji .navigate()i.navigateByUrl()

Możesz użyć tej metody .navigateByUrl()do bezwzględnego routingu ścieżki:

import {Router} from '@angular/router';

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

Podajesz bezwzględną ścieżkę do adresu URL komponentu, do którego chcesz nawigować.

Uwaga: Zawsze określaj pełną ścieżkę bezwzględną podczas wywoływania navigateByUrlmetody routera . Ścieżki bezwzględne muszą zaczynać się od wiodącej/

// Absolute route - Goes up to root level    
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params   
this.router.navigate(['/root/child', crisis.id]);

Względne trasy trasy

Jeśli chcesz użyć względnego routingu ścieżki, użyj .navigate()metody.

UWAGA: To trochę nieintuicyjne, jak działa routing, szczególnie trasy nadrzędne, rodzeństwo i podrzędne:

// Parent route - Goes up one level 
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });

// Sibling route - Stays at the current level and moves laterally, 
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });

// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });

// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });

// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'. 
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });

Lub jeśli potrzebujesz tylko nawigować w obrębie bieżącej ścieżki trasy, ale do innego parametru trasy:

// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });

Tablica parametrów łącza

Tablica parametrów łącza zawiera następujące składniki do nawigacji routera:

  • Ścieżka trasy do komponentu docelowego. ['/hero']
  • Wymagane i opcjonalne parametry trasy, które trafiają do adresu URL trasy. ['/hero', hero.id]lub['/hero', { id: hero.id, foo: baa }]

Składnia podobna do katalogu

Router obsługuje składnię podobną do katalogu na liście parametrów łącza, aby pomóc w wyszukiwaniu nazw tras:

./ lub żaden początkowy ukośnik nie jest powiązany z bieżącym poziomem.

../ aby przejść jeden poziom wyżej na ścieżce trasy.

Możesz połączyć względną składnię nawigacji ze ścieżką przodka. Jeśli musisz nawigować do trasy rodzeństwa, możesz skorzystać z ../<sibling>konwencji, aby przejść o jeden poziom wyżej, a następnie w górę i w dół ścieżki trasy rodzeństwa.

Ważne uwagi na temat względnej nagacji

Aby poruszać się po ścieżce względnej za pomocą tej Router.navigatemetody, musisz podać, ActivatedRouteaby dać routerowi wiedzę o tym, gdzie jesteś w bieżącym drzewie tras.

Po tablicy parametrów łącza dodaj obiekt z relativeToustawioną właściwością do ActivatedRoute. Router następnie oblicza docelowy adres URL na podstawie lokalizacji aktywnej trasy.

Z oficjalnej dokumentacji routera kątowego

TetraDev
źródło
3
Pamiętaj, że jeśli masz trasy dla dzieci: { path: 'home', component: Home, children: homeRoutes }to chcesz podać metodę routera: this.router.navigate(['home/address-search'])LUBthis.router.navigateByUrl(/'home/address-search')
Daniel Ram
Nawet to dobra odpowiedź, należy zauważyć, że this.router= Router;może to wprowadzić w błąd niektórych czytelników, w tym przypadku jest wzmianka o wstrzyknięciu zależności routera, który powinienem zrobić przy użyciu tego kodu constructor( private router: Router )
siddharta
@siddharta Dzięki za wskazówkę, nie zauważyłem tego, dopóki tego nie zauważyłeś. Musiałem pierwotnie napisać to szybko i zamierzałem zaktualizować później, ale zapomniałem. Przykład został zaktualizowany w celu użycia teraz prawidłowego wstrzykiwania zależności.
TetraDev
@TetraDev i skąd się wziął „this.route”: D, dodaj go do swoich zależności
Noob
33

Powinieneś użyć

this.router.parent.navigate(['/About']);

Oprócz określenia ścieżki trasy możesz także podać nazwę trasy:

{ path:'/About', name: 'About',   ... }

this.router.parent.navigate(['About']);
Luca
źródło
1
Cześć, kiedy to zrobię, pojawia się komunikat o błędzie w moim kompilatorze maszynopisu: „Argument typu„ ciąg ”nie może być przypisany do parametru typu dowolny [], brak właściwości wypychania w typie Ciąg”
AngularM
Próbowałem tego i to nie działało: this.router.parent.navigate ('[/ About]');
AngularM,
4
Powinieneś użyć tej składni: this.router.parent.navigate (['/ About']); Musisz przekazać tablicę ['/ About'] nie string '[/ About]'
Luca
W przypadku routera 3 w wersji betathis._router.navigate(['/some-route']);
Adrian Moisa
27

Można również używać bez parent

powiedzmy definicję routera jak:

{path:'/about',    name: 'About',   component: AboutComponent}

następnie można nawigować przez namezamiastpath

goToAboutPage() {
    this.router.navigate(['About']); // here "About" is name not path
}

Zaktualizowano do wersji 2.3.0

W Routing v2.0 z nazwy własności nie więcej istnieje. trasa zdefiniuj bez właściwości name . więc powinieneś użyć ścieżki zamiast nazwy . this.router.navigate(['/path'])i bez początkowego ukośnika dla ścieżki, więc użyj path: 'about'zamiastpath: '/about'

definicja routera jak:

{path:'about', component: AboutComponent}

następnie może nawigować path

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}
Shaishab Roy
źródło
6
namejest przestarzałe dla typu trasy w Angular 2.0.
RynoRn
w kątowym 2 powinien być stosowany zamiast . Aby uzyskać więcej informacji -> angular.io/docs/ts/latest/guide/router.htmlv2.3.0dataname
WildDev
8
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');
pewny
źródło
3
Ten fragment kodu może być rozwiązaniem, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
Adam Kipnis,
2

Osobiście przekonałem się, że odkąd prowadzimy ngRouteskolekcję (długą historię), czerpię największą przyjemność z:

GOTO(ri) {
    this.router.navigate(this.ngRoutes[ri]);
}

Właściwie używam go jako części jednego z pytań podczas rozmowy kwalifikacyjnej. W ten sposób mogę niemal natychmiast przeczytać, kto rozwija się wiecznie, obserwując, kto drga, gdy wpadają GOTO(1)na przekierowanie na stronę główną.

ZenAtWork
źródło