Bagaimana cara saya menavigasi ke rute induk dari rute anak?

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 menukarena router mencoba untuk merutekan saya AdminComponentalih - 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?

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 directivesarray:

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

Imperatif : navigate()Metode ini membutuhkan titik awal (yaitu, relativeToparameter). 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});

Ini sepertinya berhasil untuk saya pada Musim Semi 2017:

goBack(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

Di mana ctor komponen Anda menerima ActivatedRoutedan Router, diimpor sebagai berikut:

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

Anda dapat menavigasi ke root induk Anda seperti ini

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

Anda perlu memasukkan Route aktif saat ini ke dalam konstruktor

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }

constructor(private router: Router) {}

navigateOnParent() {
  this.router.navigate(['../some-path-on-parent']);
}

Router mendukung

• jalur absolut /xxx- dimulai pada router dari komponen root
• jalur relatif xxx- dimulai pada router dari komponen saat ini
• jalur relatif ../xxx- dimulai pada router induk dari komponen saat ini

Untuk menavigasi ke komponen induk terlepas dari jumlah parameter di rute saat ini atau rute induk: Angular 6 update 1/21/19

   let routerLink = this._aRoute.parent.snapshot.pathFromRoot
        .map((s) => s.url)
        .reduce((a, e) => {
            //Do NOT add last path!
            if (a.length + e.length !== this._aRoute.parent.snapshot.pathFromRoot.length) {
                return a.concat(e);
            }
            return a;
        })
        .map((s) => s.path);
    this._router.navigate(routerLink);

Ini memiliki bonus tambahan sebagai rute absolut yang dapat Anda gunakan dengan Router tunggal.

(Angular 4+ pasti, mungkin Angular 2 juga.)

Cara lain bisa seperti ini

this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL

dan inilah konstruktornya

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

tanpa banyak basa-basi:

this.router.navigate(['..'], {relativeTo: this.activeRoute, skipLocationChange: true});

parameter '..' membuat navigasi satu tingkat ke atas, yaitu induk :)

Rute saya memiliki pola seperti ini:

• pengguna / edit / 1 -> Edit
• pengguna / buat / 0 -> Buat
• pengguna / -> Daftar

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".

goBack(level: number = 1) {
    let commands = '../';
    this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}

Jadi, untuk beralih dari edit ke daftar saya memanggil metode seperti itu:

this.goBack(2);

Jika Anda menggunakan arahan uiSref maka Anda dapat melakukan ini

uiSref="^"

Solusi saya adalah:

const urlSplit = this._router.url.split('/');
this._router.navigate([urlSplit.splice(0, urlSplit.length - 1).join('/')], { relativeTo: this._route.parent });

Dan Routerinjeksi:

private readonly _router: Router

Semua ini tidak berhasil untuk saya ... Saya harus menggunakan:

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

private router: Router

this.router.navigate([this.router.url.substring(0, this.router.url.lastIndexOf('/'))]);

tambahkan Lokasi ke konstruktor Anda dari @angular/common

constructor(private _location: Location) {}

tambahkan fungsi kembali:

back() {
  this._location.back();
}

lalu dalam pandangan Anda:

<button class="btn" (click)="back()">Back</button>