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

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

Nó dường như không hoạt động. Tôi đã cố gắng location.go("/about");vì điều đó đã không làm việc.

Về cơ bản một khi người dùng đã đăng nhập, tôi muốn chuyển hướng họ đến một trang khác.

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

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

       });
   }
 }

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

Có 2 phương pháp để điều hướng .navigate()và.navigateByUrl()

Bạn có thể sử dụng phương thức .navigateByUrl()để định tuyến đườ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 đến URL của thành phần bạn muốn điều hướng đến.

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

// 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, sử dụng .navigate()phương pháp.

LƯU Ý: Đó là một chút không trực quan về cách thức định tuyến hoạt động, đặc biệt là các tuyến cha mẹ, 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 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 });

Liên kết mảng tham số

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

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

Cú pháp giống như thư mục

Bộ định tuyến hỗ trợ cú pháp giống như 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 hàng đầu liên quan đến mức hiện tại.

../ để đi lên một cấp trong lộ trình.

Bạn có thể kết hợp cú pháp điều hướng tương đối với một đườ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 ../<sibling>quy ước để đi lên một cấp, sau đó qua và xuống tuyến đường anh chị em.

Những lưu ý quan trọng về sự khó chịu tương đối

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

Sau mảng tham số liên kết, thêm một đối tượng với thuộc relativeTotính được đặt thành ActivatedRoute. Sau đó, bộ định tuyến 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 Angular Router chính thức

Bạn nên sử dụng

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

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

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

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

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

nói định nghĩa bộ định tuyến như:

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

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

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

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

Trong định tuyến từ thuộc tính tên v2.0 không còn tồn tại. tuyến đường xác định không có tên tài sản. vì vậy bạn nên sử dụng đường dẫn thay vì tên . this.router.navigate(['/path'])và không có dấu gạch chéo hàng đầu cho đường dẫn, vì vậy hãy sử dụng path: 'about'thay vìpath: '/about'

định nghĩa bộ định tuyến như:

{path:'about', component: AboutComponent}

sau đó có thể điều hướng bằng 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');

Cá nhân, tôi thấy rằng, vì chúng tôi duy trì một ngRoutesbộ sưu tập (truyện dài) tôi thấy thích thú nhất từ:

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

Tôi thực sự sử dụng nó như là một phần của một trong những câu hỏi phỏng vấn của chúng tôi. Bằng cách này, tôi có thể có được một bài đọc gần như ngay lập tức về những người đang phát triển mãi mãi bằng cách xem ai co giật khi họ chạy vào GOTO(1)để chuyển hướng Trang chủ.