Làm cách nào để điều hướng đến tuyến đường mẹ từ tuyến đường con?

Vấn đề của tôi là khá cổ điển. Tôi có một phần riêng tư của một ứng dụng đằng sau a login form. Khi đăng nhập thành công, nó sẽ chuyển đến một tuyến con cho ứng dụng quản trị.

Vấn đề của tôi là tôi không thể sử dụng global navigation menuvì bộ định tuyến cố gắng định tuyến trong của tôi AdminComponentthay vì của tôi AppCompoment. Vì vậy, điều hướng của tôi bị hỏng.

Một vấn đề khác là nếu ai đó muốn truy cập trực tiếp vào URL, tôi muốn chuyển hướng đến tuyến đường "đăng nhập" chính. Nhưng tôi không thể làm cho nó hoạt động. Đối với tôi, có vẻ như hai vấn đề này tương tự nhau.

Bất kỳ ý tưởng làm thế nào nó có thể được thực hiện?

Bạn muốn một liên kết / HTML hay bạn muốn định tuyến theo thứ bậc / trong mã?

Liên kết : Lệnh RouterLink luôn coi liên kết được cung cấp như một dấu tam giác với URL hiện tại:

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

Với RouterLink, hãy nhớ nhập và sử dụng directivesmảng:

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

Imperative : navigate()Phương thức yêu cầu một điểm bắt đầu (tức là relativeTotham số). Nếu không có gì được cung cấp, điều hướng là tuyệt đối:

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

Điều này dường như hiệu quả đối với tôi kể từ mùa Xuân 2017:

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

Nơi ctor thành phần của bạn chấp nhận ActivatedRoutevà Router, được nhập như sau:

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

Bạn có thể điều hướng đến thư mục gốc của bạn như thế này

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

Bạn sẽ cần phải đưa Tuyến đang hoạt động hiện tại vào hàm tạo

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

  }

constructor(private router: Router) {}

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

Bộ định tuyến hỗ trợ

• đường dẫn tuyệt đối /xxx- bắt đầu trên bộ định tuyến của thành phần gốc
• đường dẫn tương đối xxx- bắt đầu trên bộ định tuyến của thành phần hiện tại
• đường dẫn tương đối ../xxx- bắt đầu trên bộ định tuyến mẹ của thành phần hiện tại

Để điều hướng đến thành phần chính bất kể số lượng tham số trong tuyến hiện tại hay tuyến mẹ: 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);

Điều này có lợi ích bổ sung là trở thành một tuyến đường tuyệt đối mà bạn có thể sử dụng với Bộ định tuyến singleton.

(Chắc chắn là Angular 4+, có thể là Angular 2 nữa.)

Một cách khác có thể như thế này

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

và đây là hàm tạo

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

mà không có nhiều ado:

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

tham số '..' làm cho điều hướng lên một cấp, tức là cha mẹ :)

Các tuyến đường của tôi có dạng như sau:

• user / edit / 1 -> Edit
• user / create / 0 -> Create
• người dùng / -> Danh sách

Ví dụ: khi tôi đang ở trang Chỉnh sửa và tôi cần quay lại trang danh sách, tôi sẽ quay lại 2 cấp trên lộ trình.

Suy nghĩ về điều đó, tôi đã tạo phương thức của mình với tham số "level".

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

Vì vậy, để đi từ chỉnh sửa đến danh sách, tôi gọi phương thức như vậy:

this.goBack(2);

thêm Vị trí vào phương thức khởi tạo của bạn từ @angular/common

constructor(private _location: Location) {}

thêm chức năng quay lại:

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

và sau đó theo quan điểm của bạn:

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

Nếu bạn đang sử dụng chỉ thị uiSref thì bạn có thể làm điều này

uiSref="^"

Giải pháp của tôi là:

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

Và Routertiêm:

private readonly _router: Router