Açısal 2 - this.router.parent.navigate ('/ about') kullanarak başka bir rotaya nasıl gidilir?

Açısal 2 - düğmesini kullanarak başka bir rotaya nasıl gidilir this.router.parent.navigate('/about').

Çalışmıyor gibi görünüyor. Ben location.go("/about");işe yaramadı olarak denedim .

Temelde bir kullanıcı giriş yaptıktan sonra başka bir sayfaya yönlendirmek istiyorum.

İşte benim kod aşağıda:

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

       });
   }
 }

Mutlak yol yönlendirme

Gezinme için 2 yöntem vardır .navigate()ve.navigateByUrl()

.navigateByUrl()Mutlak yol yönlendirmesi için yöntemi kullanabilirsiniz :

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

constructor(private router: Router) {}

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

Gitmek istediğiniz bileşenin URL'sinin mutlak yolunu koyarsınız.

Not: Yönlendiricinin navigateByUrlyöntemini çağırırken her zaman tam yolu belirtin . Mutlak yollar bir satır aralığı işaretiyle başlamalıdır/

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

Göreli yol yönlendirme

Göreli yol yönlendirmeyi kullanmak istiyorsanız, .navigate()yöntemi kullanın .

NOT: Yönlendirmenin, özellikle ebeveyn, kardeş ve çocuk yollarının nasıl çalıştığı biraz sezgisel değildir:

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

Veya yalnızca geçerli rota yolunda, ancak farklı bir rota parametresine gitmeniz gerekiyorsa:

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

Bağlantı parametreleri dizisi

Bir bağlantı parametreleri dizisi, yönlendirici gezinmesi için aşağıdaki bileşenleri içerir:

• Hedef bileşene giden yolun yolu. ['/hero']
• Rota URL'sine giren gerekli ve isteğe bağlı rota parametreleri. ['/hero', hero.id]veya['/hero', { id: hero.id, foo: baa }]

Dizin benzeri sözdizimi

Yönlendirici, rota adı aramasına rehberlik etmeye yardımcı olmak için bir bağlantı parametreleri listesinde dizin benzeri sözdizimini destekler:

./ veya hiçbir eğik çizgi mevcut seviyeye göreli değildir.

../ rota yolunda bir seviye yukarı çıkmak için.

Göreli gezinme sözdizimini bir ata yoluyla birleştirebilirsiniz. Bir kardeş rotaya ../<sibling>gitmeniz gerekiyorsa, bir seviye yukarı, ardından kardeş rota yolunu yukarı ve aşağı gitmek için kuralı kullanabilirsiniz .

Göreceli nagivasyon hakkında önemli notlar

Router.navigateYöntemin göreli bir yolunda gezinmek ActivatedRouteiçin, yönlendiriciye geçerli yol ağacında nerede olduğunuzu bildirmesi için sağlamanız gerekir .

Bağlantı parametreleri dizisinden sonra, öğesine relativeToayarlanmış bir özellik içeren bir nesne ekleyin ActivatedRoute. Ardından yönlendirici hedef URL'yi etkin rotanın konumuna göre hesaplar.

Resmi Açısal Yönlendirici Belgelerinden

Kullanmalısın

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

Rota yolunu belirtmenin yanı sıra, rotanızın adını da belirleyebilirsiniz:

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

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

Ayrıca olmadan kullanabilirsiniz parent

yönlendirici tanımı söyle:

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

sonra nameyerine ile gezinebilirsinizpath

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

V2.3.0 için güncellendi

V2.0 name özelliğinden Yönlendirme alanında artık mevcut değil. route name özelliği olmadan tanımla . bu yüzden ad yerine yol kullanmalısınız . ve hiçbir lider çizgi yolu için öylesine kullanmak yerinethis.router.navigate(['/path'])path: 'about'path: '/about'

yönlendirici tanımı gibi:

{path:'about', component: AboutComponent}

sonra tarafından gezinebilir 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');

Şahsen, bir ngRouteskoleksiyon (uzun hikaye) sürdürdüğümüzden , en çok keyfi bulduğumu buldum :

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

Aslında röportaj sorularımızın bir parçası olarak kullanıyorum. Bu şekilde, GOTO(1)Ana Sayfa yönlendirmesi için kimlerin seğirdiğini izleyerek sonsuza dek kimin geliştiğini neredeyse anında okuyabilirim .