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

186

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

       });
   }
 }
AngularM
fonte
Além disso, eu defini a configuração da rota no meu arquivo app.ts da seguinte maneira: @RouteConfig ([{path: '/', redirectTo: '/ home'}, {path: '/ home', componente: Todo, como : 'Home'}, {path: '/ about', componente: About, como: 'About'}])
AngularM
você deve remover o /em seus caminhos como ele isnt necessário
mast3rd3mon

Respostas:

318

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

TetraDev
fonte
3
Mente-lhe se você tem rotas crianças: { path: 'home', component: Home, children: homeRoutes }Então você quer prever que o método router: this.router.navigate(['home/address-search'])ORthis.router.navigateByUrl(/'home/address-search')
Daniel Ram
Mesmo esta é uma boa resposta, é importante notar que this.router= Router;pode confundir alguns leitores, neste caso, é uma menção a uma injeção de dependência do Router, o que me deve feitas usando esse código em vez constructor( private router: Router )
siddharta
@ siddharta Obrigado pela dica, eu não percebi isso até que você apontou. Devo ter escrito originalmente rapidamente e pretendia atualizá-lo mais tarde, mas esqueci. O exemplo foi atualizado para usar a injeção de dependência adequada agora.
TetraDev 28/02/19
@TetraDev e onde "this.route" vem: D, adicioná-lo para ur dependências
Noob
33

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']);
Luca
fonte
1
Oi, quando eu faço que eu recebo essa mensagem de erro no meu compilador datilografado: "Argumento do tipo 'string' não pode ser atribuído ao parâmetro do tipo qualquer [], empurre a propriedade está faltando no tipo String"
AngularM
Eu tentei isso e não funcionou: this.router.parent.navigate ('[/ About]');
AngularM 06/11
4
Você deve usar esta sintaxe: this.router.parent.navigate (['/ About']); Você tem que passar array ['/ About'] não string '[/ About]'
Luca
Para router 3 uso de betathis._router.navigate(['/some-route']);
Adrian Moisa
27

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
}
Shaishab Roy
fonte
6
namefoi preterido no tipo de rota no Angular 2.0.
RynoRn
no Angular 2, v2.3.0o datadeve ser usado em vez de name. Para obter mais detalhes -> angular.io/docs/ts/latest/guide/router.html
WildDev 12/12/16
8
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');
suresh
fonte
3
Embora esse snippet de código possa ser a solução, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
19618 Adam Kipnis
2

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.

ZenAtWork
fonte