Angular 2 - Como navegar para outra rota usando this.router.parent.navigate ('/ about')?

Angular 2 - Como navegar para outra rota usando this.router.parent.navigate('/about').

Parece não funcionar. Eu tentei location.go("/about");como isso não funcionou.

Basicamente, quando um usuário faz login, quero redirecioná-lo para outra página.

Aqui está o meu código abaixo:

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

       });
   }
 }

Roteamento de caminho absoluto

Existem 2 métodos para navegação .navigate()e.navigateByUrl()

Você pode usar o método .navigateByUrl()para roteamento de caminho absoluto:

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

constructor(private router: Router) {}

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

Você coloca o caminho absoluto para a URL do componente para o qual deseja navegar.

Nota: Sempre especifique o caminho absoluto completo ao chamar o roteador navigateByUrl método . Caminhos absolutos devem começar com um 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]);

Roteamento de caminho relativo

Se você deseja usar o roteamento de caminho relativo, use o .navigate()método

NOTA: É um pouco pouco intuitivo como o roteamento funciona, principalmente as rotas pai, irmão e filho:

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

Ou se você só precisa navegar dentro do caminho da rota atual, mas para um parâmetro de rota 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 });

Matriz de parâmetros de link

Uma matriz de parâmetros de link contém os seguintes ingredientes para a navegação do roteador:

• O caminho da rota para o componente de destino. ['/hero']
• Parâmetros de rota obrigatórios e opcionais que entram no URL da rota. ['/hero', hero.id]ou['/hero', { id: hero.id, foo: baa }]

Sintaxe semelhante a diretório

O roteador suporta sintaxe semelhante a diretório em uma lista de parâmetros de link para ajudar a guiar a pesquisa de nome de rota:

./ ou nenhuma barra inicial é relativa ao nível atual.

../ para subir um nível no caminho da rota.

Você pode combinar a sintaxe relativa da navegação com um caminho ancestral. Se você precisar navegar para uma rota de irmão, poderá usar o../<sibling> convenção para subir um nível e depois subir e descer o caminho da rota de irmão.

Notas importantes sobre a relativa irrigação

Para navegar por um caminho relativo com o Router.navigatemétodo, você deve fornecer oActivatedRoute ao roteador o conhecimento de onde você está na árvore de rotas atual.

Após a matriz de parâmetros do link, adicione um objeto com uma relativeTopropriedade configurada aoActivatedRoute . O roteador calcula o URL de destino com base na localização da rota ativa.

Da documentação oficial do roteador angular

Você deveria usar

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

Além de especificar o caminho da rota, você também pode especificar o nome da sua rota:

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

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

Também pode usar sem parent

diga a definição do roteador como:

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

então pode navegar em namevez depath

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

Atualizado para V2.3.0

Na propriedade Routing from v2.0 name , não existe mais. definir rota sem propriedade de nome . então você deve usar o caminho em vez do nome . this.router.navigate(['/path'])e nenhuma barra principal para o caminho, use em path: 'about'vez depath: '/about'

definição de roteador como:

{path:'about', component: AboutComponent}

então pode 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');

Pessoalmente, descobri que, como mantemos uma ngRoutescoleção (longa história), encontro o maior prazer em:

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

Na verdade, eu o uso como parte de uma das perguntas da entrevista. Dessa forma, posso obter uma leitura quase instantânea de quem está se desenvolvendo desde sempre, observando quem se contrai quando se GOTO(1)depara com o redirecionamento da página inicial.