Angular 2 - Bagaimana cara menavigasi ke rute lain menggunakan this.router.parent.navigate ('/ about')?

Angular 2 - Cara menavigasi ke rute lain menggunakan this.router.parent.navigate('/about').

Tampaknya tidak berfungsi. Saya mencoba location.go("/about");karena itu tidak berhasil.

Pada dasarnya setelah pengguna masuk saya ingin mengarahkan mereka ke halaman lain.

Ini kode saya di bawah ini:

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

       });
   }
 }

Routing jalur absolut

Ada 2 metode untuk navigasi, .navigate()dan.navigateByUrl()

Anda dapat menggunakan metode ini .navigateByUrl()untuk routing jalur absolut:

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

constructor(private router: Router) {}

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

Anda meletakkan jalur absolut ke URL komponen yang ingin Anda navigasi.

Catatan: Selalu tentukan path absolut lengkap saat memanggil navigateByUrlmetode router . Jalur absolut harus dimulai dengan yang pertama/

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

Routing jalur relatif

Jika Anda ingin menggunakan rute jalur relatif, gunakan .navigate()metode ini.

CATATAN: Agak tidak intuitif bagaimana perutean bekerja, terutama rute induk, saudara, dan anak:

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

Atau jika Anda hanya perlu menavigasi dalam jalur rute saat ini, tetapi ke parameter rute yang berbeda:

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

Array parameter tautan

Array parameter tautan menyimpan bahan-bahan berikut untuk navigasi router:

• Jalur rute ke komponen tujuan. ['/hero']
• Parameter rute wajib dan opsional yang masuk ke URL rute. ['/hero', hero.id]atau['/hero', { id: hero.id, foo: baa }]

Sintaks seperti direktori

Router mendukung sintaksis mirip direktori dalam daftar parameter tautan untuk membantu memandu pencarian nama rute:

./ atau tidak ada garis miring yang relatif terhadap level saat ini.

../ untuk naik satu tingkat di jalur rute.

Anda dapat menggabungkan sintaks navigasi relatif dengan jalur leluhur. Jika Anda harus menavigasi ke rute persaudaraan, Anda bisa menggunakan ../<sibling>konvensi untuk naik satu tingkat, lalu naik turun jalur rute persaudaraan.

Catatan penting tentang nagivasi relatif

Untuk menavigasi jalur relatif dengan Router.navigatemetode ini, Anda harus menyediakan ActivatedRouteuntuk memberi pengetahuan router tentang di mana Anda berada di pohon rute saat ini.

Setelah array parameter tautan, tambahkan objek dengan relativeToproperti yang disetel ke ActivatedRoute. Router kemudian menghitung URL target berdasarkan lokasi rute aktif.

Dari Dokumentasi Router Sudut resmi

Kamu harus menggunakan

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

Selain menentukan jalur rute, Anda juga dapat menentukan nama rute Anda:

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

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

Juga bisa digunakan tanpa parent

katakan definisi router seperti:

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

kemudian dapat menavigasi dengan namealih-alihpath

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

Diperbarui untuk V2.3.0

Di Routing from v2.0 name property tidak ada lagi. route define tanpa properti nama . jadi Anda harus menggunakan jalur alih-alih nama . this.router.navigate(['/path'])dan tidak ada garis miring terkemuka untuk jalur jadi gunakan path: 'about'sajapath: '/about'

definisi router seperti:

{path:'about', component: AboutComponent}

kemudian dapat menavigasi dengan 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');

Secara pribadi, saya menemukan bahwa, karena kami memelihara ngRouteskoleksi (cerita panjang) saya menemukan kesenangan paling dari:

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

Saya benar-benar menggunakannya sebagai bagian dari salah satu pertanyaan wawancara kami. Dengan cara ini, saya bisa membaca hampir instan di siapa yang telah berkembang selamanya dengan menonton siapa yang bergerak ketika mereka mengalami GOTO(1)untuk pengalihan Homepage.