typescript - Angular 2 - Làm thế nào để tôi điều hướng đến một tuyến đường khác bằng cách sử dụng this.router.parent.navigate('/about')?

Angular 2 - Làm thế nào để tôi điều hướng đến một tuyến đường khác bằng cách sử dụng this.router.parent.navigate('/about')?

Có vẻ như nó không hoạt động. Tôi đã thử location.go("/about"); nhưng điều đó cũng không hiệu quả.

Cơ bản là, một khi người dùng đã đăng nhập, tôi muốn điều hướng họ sang một trang khác.

Dưới đây là mã của tôi:

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

       });
   }
 }

Câu trả lời #1

Định tuyến đường dẫn tuyệt đối

Có 2 phương thức để điều hướng, .navigate() và .navigateByUrl()

Bạn có thể sử dụng phương thức .navigateByUrl() cho định tuyến theo đường dẫn tuyệt đối:

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

constructor(private router: Router) {}

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

Bạn đặt đường dẫn tuyệt đối tới URL của thành phần mà bạn muốn điều hướng đến.

Lưu ý: Luôn chỉ định đường dẫn tuyệt đối đầy đủ khi gọi phương thức navigateByUrl của router. Đường dẫn tuyệt đối phải bắt đầu bằng /

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

Định tuyến đường dẫn tương đối

Nếu bạn muốn sử dụng định tuyến đường dẫn tương đối, hãy sử dụng phương thức .navigate().

LƯU Ý: Cách định tuyến hoạt động hơi không trực quan, đặc biệt là các tuyến cha, anh chị em và con:

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

Hoặc nếu bạn chỉ cần điều hướng trong đường dẫn tuyến hiện tại, nhưng đến một tham số tuyến khác:

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

Mảng tham số liên kết

Mảng tham số liên kết chứa các thành phần sau cho điều hướng bộ định tuyến:

• Đường dẫn của tuyến đến thành phần đích. ['/hero']
• Tham số tuyến đường bắt buộc và tùy chọn được đưa vào URL tuyến đường. ['/hero', hero.id] hoặc ['/hero', { id: hero.id, foo: baa }]

Cú pháp kiểu thư mục

Bộ định tuyến hỗ trợ cú pháp giống thư mục trong danh sách tham số liên kết để giúp hướng dẫn tra cứu tên tuyến đường:

./ hoặc không có dấu gạch chéo đầu là tương đối với cấp hiện tại.

../ để đi lên một cấp trong đường dẫn.

Bạn có thể kết hợp cú pháp điều hướng tương đối với đường dẫn tổ tiên. Nếu bạn phải điều hướng đến một tuyến đường anh chị em, bạn có thể sử dụng quy ước ../<sibling> để lên một cấp, sau đó sang và đi xuống đường dẫn tuyến đường anh chị em.

Ghi chú quan trọng về điều hướng tương đối

Để điều hướng một đường dẫn tương đối bằng phương thức Router.navigate, bạn phải cung cấp ActivatedRoute để cho router biết vị trí của bạn trong cây tuyến đường hiện tại.

Sau mảng các tham số liên kết, thêm một đối tượng với thuộc tính relativeTo được đặt thành ActivatedRoute. Bộ định tuyến sau đó sẽ tính toán URL mục tiêu dựa trên vị trí của tuyến đang hoạt động.

Từ Tài liệu chính thức của Angular Router

Câu trả lời #2

Bạn nên sử dụng

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

Ngoài việc chỉ định đường dẫn tuyến, bạn cũng có thể chỉ định tên của tuyến của mình:

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

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

Câu trả lời số 3

Cũng có thể sử dụng mà không cần parent

nói định nghĩa router như:

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

sau đó có thể điều hướng bằng name thay vì path

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

Đã cập nhật cho V2.3.0

Trong Routing từ v2.0, thuộc tính name không còn tồn tại. Route được định nghĩa mà không có thuộc tính name. Vì vậy bạn nên sử dụng path thay cho name. this.router.navigate(['/path']) và không có dấu gạch chéo đứng đầu cho path nên sử dụng path: 'about' thay cho path: '/about'

định nghĩa router như:

{path:'about', component: AboutComponent}

sau đó có thể điều hướng theo path

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

Câu trả lời #4

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

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