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

this.router.navigate not working

Question

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

No parece funcionar. Intenté location.go ("/ about"); como 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'');

       });
   }
 }

¡Gracias de antemano!

Answer 1

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

Answer 2

Personalmente, descubrí que, dado que mantenemos una colección ngRoutes (larga historia), ngRoutes 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 con GOTO(1) para la redirección de la página de inicio.

Answer 3

También se puede usar sin parent

decir definición de enrutador como:

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

luego puede navegar por name lugar de path

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 debes usar la ruta en lugar del nombre . this.router.navigate([''/path'']) y sin barra diagonal para la ruta, así que use la path: ''about'' lugar de la path: ''/about''

definición de enrutador como:

{path:''about'', component: AboutComponent}

luego puede navegar por path

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

Answer 4

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 método de navigateByUrl del enrutador. Las rutas absolutas deben comenzar con un /

// 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 método .navigate() .

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 convención ../<sibling> 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 método Router.navigate , debe proporcionar ActivatedRoute para que el enrutador Router.navigate 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 propiedad relativeTo 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

Answer 5

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

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