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

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('Mark@gmail.com', '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');

       });
   }
 }

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

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']);

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
}

import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');

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ą.