Masalah saya cukup klasik. Saya memiliki bagian pribadi dari aplikasi yang berada di belakang file login form
. Ketika login berhasil, ia pergi ke rute anak untuk aplikasi admin.
Masalah saya adalah bahwa saya tidak dapat menggunakan global navigation menu
karena router mencoba untuk merutekan saya AdminComponent
alih - alih milik saya AppCompoment
. Jadi navigasi saya rusak.
Masalah lainnya adalah jika seseorang ingin mengakses URL secara langsung, saya ingin mengarahkan ke rute "login" orang tua. Tapi aku tidak bisa membuatnya berhasil. Bagi saya sepertinya dua masalah ini serupa.
Tahu bagaimana itu bisa dilakukan?
angular
angular-routing
angular-router
Carl Boisvert
sumber
sumber
Jawaban:
Apakah Anda menginginkan tautan / HTML atau Anda ingin merutekan secara imperatif / dalam kode?
Tautan : Direktif RouterLink selalu memperlakukan tautan yang disediakan sebagai delta ke URL saat ini:
[routerLink]="['/absolute']" [routerLink]="['../../parent']" [routerLink]="['../sibling']" [routerLink]="['./child']" // or [routerLink]="['child']" // with route param ../../parent;abc=xyz [routerLink]="['../../parent', {abc: 'xyz'}]" // with query param and fragment ../../parent?p1=value1&p2=v2#frag [routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"
Dengan RouterLink, ingatlah untuk mengimpor dan menggunakan
directives
array:import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ directives: [ROUTER_DIRECTIVES],
Imperatif :
navigate()
Metode ini membutuhkan titik awal (yaitu,relativeTo
parameter). Jika tidak ada yang tersedia, navigasi mutlak:import { Router, ActivatedRoute } from '@angular/router'; ... constructor(private router: Router, private route: ActivatedRoute) {} ... this.router.navigate(["/absolute/path"]); this.router.navigate(["../../parent"], {relativeTo: this.route}); this.router.navigate(["../sibling"], {relativeTo: this.route}); this.router.navigate(["./child"], {relativeTo: this.route}); // or this.router.navigate(["child"], {relativeTo: this.route}); // with route param ../../parent;abc=xyz this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route}); // with query param and fragment ../../parent?p1=value1&p2=v2#frag this.router.navigate(["../../parent"], {relativeTo: this.route, queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'}); // navigate without updating the URL this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});
sumber
router.navigate(string)
metode tampaknya tidak ada dalam versi saat ini dari sudut (2,2). Saya mencari di dokumen dan hanya menemukannavigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
. Atau apakah saya benar-benar melewatkan sesuatu?relativeTo
data saat Anda menggunakan [routerLink] di html alih-alih skrip ketikan?../../../
daripada../
menavigasi ke orang tua ('/users'
dari'/users/1'
).Ini sepertinya berhasil untuk saya pada Musim Semi 2017:
Di mana ctor komponen Anda menerima
ActivatedRoute
danRouter
, diimpor sebagai berikut:import { ActivatedRoute, Router } from '@angular/router';
sumber
parentPath
'work: queue' (yang memiliki anak) dan kata anak memuat modul anak dengan parameter.fullCurrentPath
: 'pekerjaan / pengiriman / modul / daftar'. Kode di atas tidak dapat dimuatparentPath
darifullCurrentPath
.Anda dapat menavigasi ke root induk Anda seperti ini
Anda perlu memasukkan Route aktif saat ini ke dalam konstruktor
sumber
this.router.navigate(['.'], {relativeTo: this.activeRoute.parent});
akan berfungsi dengan benar dalam kasus, ketika Anda menggunakan komponen yang sama di dua jalur: / users / create dan / users / edit / 123. Dalam kedua kasus, ini akan mengarah ke orang tua / pengguna. Navigasi biasa denganthis.router.navigate([".."], {relativeTo: this.activeRoute})
hanya akan berfungsi untuk pengguna / buat tetapi tidak akan berfungsi untuk pengguna / edit / 123 karena akan menavigasi ke / pengguna / edit / rute yang tidak ada.Router mendukung
/xxx
- dimulai pada router dari komponen rootxxx
- dimulai pada router dari komponen saat ini../xxx
- dimulai pada router induk dari komponen saat inisumber
../
sudah cukup dikenal, tapi pada akhirnya masih ambigu. Terima kasih atas petunjuknya.Untuk menavigasi ke komponen induk terlepas dari jumlah parameter di rute saat ini atau rute induk: Angular 6 update 1/21/19
Ini memiliki bonus tambahan sebagai rute absolut yang dapat Anda gunakan dengan Router tunggal.
(Angular 4+ pasti, mungkin Angular 2 juga.)
sumber
this._router.navigate([])
, sementarathis._router.navigate([[]])
mengambil ke rute induk, jika dan hanya jika rute induk bukan root itu sendiri.Cara lain bisa seperti ini
dan inilah konstruktornya
sumber
tanpa banyak basa-basi:
parameter '..' membuat navigasi satu tingkat ke atas, yaitu induk :)
sumber
Rute saya memiliki pola seperti ini:
Ketika saya berada di halaman Edit, misalnya, dan saya perlu kembali ke halaman daftar, saya akan mengembalikan 2 level ke atas pada rute.
Berpikir tentang itu, saya membuat metode saya dengan parameter "level".
Jadi, untuk beralih dari edit ke daftar saya memanggil metode seperti itu:
sumber
Jika Anda menggunakan arahan uiSref maka Anda dapat melakukan ini
sumber
Solusi saya adalah:
Dan
Router
injeksi:sumber
Semua ini tidak berhasil untuk saya ... Saya harus menggunakan:
sumber
tambahkan Lokasi ke konstruktor Anda dari
@angular/common
tambahkan fungsi kembali:
lalu dalam pandangan Anda:
sumber