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


186

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

       });
   }
 }

Juga, saya telah menetapkan konfigurasi rute dalam file app.ts saya seperti: @RouteConfig ([{path: '/', redirectTo: '/ home'}, {path: '/ home', komponen: Todo, as : 'Home'}, {path: '/ about', komponen: Tentang, sebagai: 'Tentang'}])
AngularM

Anda harus menghapus /di jalur Anda karena tidak diperlukan
mast3rd3mon

Jawaban:


319

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


3
Pikirkan Anda jika Anda memiliki rute anak-anak: { path: 'home', component: Home, children: homeRoutes }Maka Anda ingin memberikan itu dengan metode router: this.router.navigate(['home/address-search'])ORthis.router.navigateByUrl(/'home/address-search')
Daniel Ram

Meskipun ini adalah jawaban yang baik, penting untuk diperhatikan yang this.router= Router;mungkin membingungkan beberapa pembaca, dalam hal ini adalah penyebutan ketergantungan pada Router, yang harus saya buat menggunakan kode ini sebagai gantinya constructor( private router: Router )
siddharta

@iddharta Terima kasih atas tipnya, saya tidak menyadarinya sampai Anda menunjukkannya. Saya awalnya harus menulisnya dengan cepat dan bermaksud memperbaruinya nanti tetapi lupa. Contoh telah diperbarui untuk menggunakan injeksi ketergantungan yang tepat sekarang.
TetraDev

@TetraDev dan dari mana "this.route" ini berasal: D, tambahkan ke dependensi Anda
Noob

33

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

1
Hai, ketika saya melakukan itu saya mendapatkan pesan kesalahan ini di kompiler naskah saya: "Argumen tipe 'string' tidak dapat ditentukan untuk parameter tipe [], Properti mendorong hilang dalam tipe String"
AngularM

Saya mencoba ini dan tidak berhasil: this.router.parent.navigate ('[/ Tentang]');
AngularM

4
Anda harus menggunakan sintaks ini: this.router.parent.navigate (['/ About']); Anda harus melewatkan array ['/ Tentang'] bukan string '[/ Tentang]'
Luca

Untuk penggunaan router 3 betathis._router.navigate(['/some-route']);
Adrian Moisa

27

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
}

6
nametidak digunakan lagi pada tipe Route di Angular 2.0.
RynoRn

di sudut 2 v2.3.0yang dataakan digunakan sebagai pengganti name. Untuk detail lebih lanjut -> angular.io/docs/ts/latest/guide/router.html
WildDev

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

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

3
Sementara cuplikan kode ini mungkin solusinya, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Adam Kipnis

2

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.