Angolare 2 - Come navigare su un altro percorso usando this.router.parent.navigate ('/ about')?

Angolare 2 - Come navigare verso un altro percorso usando this.router.parent.navigate('/about').

Non sembra funzionare. Ho provato location.go("/about");perché non funzionava.

Fondamentalmente una volta che un utente ha effettuato l'accesso, voglio reindirizzarli su un'altra pagina.

Ecco il mio codice qui sotto:

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

       });
   }
 }

Instradamento del percorso assoluto

Esistono 2 metodi per la navigazione .navigate()e.navigateByUrl()

È possibile utilizzare il metodo .navigateByUrl()per il routing di percorso assoluto:

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

constructor(private router: Router) {}

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

Inserisci il percorso assoluto dell'URL del componente a cui vuoi navigare.

Nota: specificare sempre il percorso assoluto completo quando si chiama il navigateByUrlmetodo del router . I percorsi assoluti devono iniziare con una linea guida/

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

Instradamento del percorso relativo

Se si desidera utilizzare il percorso relativo, utilizzare il .navigate()metodo

NOTA: è un po 'poco intuitivo il funzionamento del routing, in particolare le rotte padre, fratello e figlio:

// 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 });

O se hai solo bisogno di navigare all'interno del percorso corrente, ma verso un parametro di percorso diverso:

// 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 });

Matrice dei parametri di collegamento

Un array di parametri di collegamento contiene i seguenti ingredienti per la navigazione del router:

• Il percorso del percorso verso il componente di destinazione. ['/hero']
• Parametri del percorso obbligatori e facoltativi che vanno nell'URL del percorso. ['/hero', hero.id]o['/hero', { id: hero.id, foo: baa }]

Sintassi simile a una directory

Il router supporta una sintassi simile a una directory in un elenco di parametri di collegamento per guidare la ricerca del nome del percorso:

./ o nessuna barra iniziale è relativa al livello corrente.

../ per salire di un livello nel percorso.

È possibile combinare la sintassi di navigazione relativa con un percorso dell'antenato. Se è necessario navigare verso un percorso di pari livello, è possibile utilizzare la ../<sibling>convenzione per salire di un livello, quindi su e giù per il percorso del percorso di fratellanza.

Note importanti sulla relativa nagivazione

Per percorrere un percorso relativo con il Router.navigatemetodo, è necessario fornire il ActivatedRouteper fornire al router la conoscenza di dove ci si trova nella struttura del percorso corrente.

Dopo la matrice dei parametri di collegamento, aggiungere un oggetto con una relativeToproprietà impostata su ActivatedRoute. Il router quindi calcola l'URL di destinazione in base alla posizione del percorso attivo.

Dalla documentazione ufficiale del router angolare

Dovresti usare

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

Oltre a specificare il percorso, puoi anche specificare il nome del percorso:

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

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

Inoltre può usare senza parent

dì la definizione del router come:

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

quindi può navigare nameinvece dipath

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

Aggiornato per V2.3.0

In Routing da v2.0 la proprietà del nome non esiste più. route definisce senza nome proprietà. quindi dovresti usare path invece di name . this.router.navigate(['/path'])e nessuna barra iniziale per il percorso, quindi usa path: 'about'invece dipath: '/about'

definizione del router come:

{path:'about', component: AboutComponent}

quindi può navigare da 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');

Personalmente, ho scoperto che, dal momento che manteniamo una ngRoutescollezione (lunga storia), trovo il massimo divertimento da:

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

In realtà lo uso come parte di una delle nostre domande sul colloquio. In questo modo, posso ottenere una lettura quasi istantanea su chi si è sviluppato per sempre guardando chi si contrae quando si imbattono nel GOTO(1)reindirizzamento della home page.