Angular 2: ¿Cómo navegar a otra ruta usando this.router.parent.navigate ('/ about')?

Angular 2 - Cómo navegar a otra ruta usando this.router.parent.navigate('/about').

No parece funcionar. Lo intenté location.go("/about");porque eso no funcionó.

Básicamente, una vez que un usuario ha iniciado sesión, quiero redirigirlo a otra página.

Aquí está mi código a continuación:

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

       });
   }
 }

Ruta de ruta absoluta

Hay 2 métodos para la navegación, .navigate()y.navigateByUrl()

Puede usar el método .navigateByUrl()para el enrutamiento absoluto de la ruta:

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

constructor(private router: Router) {}

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

Pones la ruta absoluta a la URL del componente al que deseas navegar.

Nota: Siempre especifique la ruta absoluta completa cuando llame al navigateByUrlmétodo del enrutador . Los caminos absolutos deben comenzar con un líder/

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

Enrutamiento de ruta relativa

Si desea utilizar el enrutamiento de ruta relativa, utilice el .navigate()método

NOTA: No es intuitivo cómo funciona el enrutamiento, especialmente las rutas principales, secundarias y secundarias:

// 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 si solo necesita navegar dentro de la ruta de ruta actual, pero a un parámetro de ruta diferente:

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

Conjunto de parámetros de enlace

Una matriz de parámetros de enlace contiene los siguientes ingredientes para la navegación del enrutador:

• La ruta de la ruta al componente de destino. ['/hero']
• Parámetros de ruta obligatorios y opcionales que entran en la URL de ruta. ['/hero', hero.id]o['/hero', { id: hero.id, foo: baa }]

Sintaxis tipo directorio

El enrutador admite una sintaxis similar a un directorio en una lista de parámetros de enlace para ayudar a guiar la búsqueda del nombre de ruta:

./ o ninguna barra inclinada es relativa al nivel actual.

../ para subir un nivel en la ruta de la ruta.

Puede combinar la sintaxis de navegación relativa con una ruta de antepasado. Si debe navegar a una ruta entre hermanos, puede usar la ../<sibling>convención para subir un nivel y luego subir y bajar la ruta de la ruta entre hermanos.

Notas importantes sobre la relativa nagivación

Para navegar por una ruta relativa con el Router.navigatemétodo, debe proporcionar el ActivatedRoutepara dar al enrutador conocimiento de dónde se encuentra en el árbol de ruta actual.

Después de la matriz de parámetros de enlace, agregue un objeto con una relativeTopropiedad establecida en ActivatedRoute. Luego, el enrutador calcula la URL de destino en función de la ubicación de la ruta activa.

De la documentación oficial del enrutador angular

Deberías usar

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

Además de especificar la ruta de la ruta, también puede especificar el nombre de su ruta:

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

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

También se puede usar sin parent

decir definición de enrutador como:

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

entonces puede navegar en namelugar depath

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

Actualizado para V2.3.0

En Enrutamiento desde v2.0, la propiedad de nombre ya no existe. ruta definida sin nombre de propiedad. así que deberías usar la ruta en lugar del nombre . this.router.navigate(['/path'])y sin barra diagonal para la ruta, así que úsala en path: 'about'lugar depath: '/about'

definición de enrutador como:

{path:'about', component: AboutComponent}

entonces puede navegar por 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, descubrí que, dado que mantenemos una ngRoutescolección (larga historia), disfruto más de:

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

De hecho, lo uso como parte de una de nuestras preguntas de la entrevista. De esta manera, puedo obtener una lectura casi instantánea de quién se ha estado desarrollando para siempre al ver quién se contrae cuando se encuentran GOTO(1)con la redirección de la página de inicio.