ฉันจะนำทางไปยังเส้นทางหลักจากเส้นทางลูกได้อย่างไร

ปัญหาของฉันค่อนข้างคลาสสิก ฉันมีส่วนส่วนตัวของแอปพลิเคชันซึ่งอยู่เบื้องหลังไฟล์login form. เมื่อการเข้าสู่ระบบสำเร็จระบบจะไปยังเส้นทางลูกสำหรับแอปพลิเคชันผู้ดูแลระบบ

ปัญหาของฉันคือฉันไม่สามารถใช้งานได้global navigation menuเนื่องจากเราเตอร์พยายามกำหนดเส้นทางในฉันAdminComponentแทนที่จะเป็นAppCompomentไฟล์. ดังนั้นการนำทางของฉันเสีย

ปัญหาอีกประการหนึ่งคือหากมีผู้ต้องการเข้าถึง URL โดยตรงฉันต้องการเปลี่ยนเส้นทางไปยังเส้นทาง "เข้าสู่ระบบ" หลัก แต่ฉันไม่สามารถทำให้มันทำงานได้ สำหรับฉันแล้วดูเหมือนว่าสองประเด็นนี้จะคล้ายกัน

มีความคิดว่าจะทำได้อย่างไร?

คุณต้องการลิงค์ / HTML หรือคุณต้องการกำหนดเส้นทางจำเป็น / ในรหัส?

ลิงก์ : คำสั่ง RouterLink จะถือว่าลิงก์ที่ให้มาเป็นเดลต้าไปยัง URL ปัจจุบันเสมอ:

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

ด้วย RouterLink อย่าลืมนำเข้าและใช้directivesอาร์เรย์:

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

ความจำเป็น : navigate()วิธีการนี้ต้องการจุดเริ่มต้น (เช่นrelativeToพารามิเตอร์) หากไม่มีการระบุการนำทางจะสมบูรณ์:

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

ดูเหมือนว่าจะใช้ได้ผลสำหรับฉันในฤดูใบไม้ผลิปี 2017

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

โดยที่ ctor คอมโพเนนต์ของคุณยอมรับActivatedRouteและRouterนำเข้าดังนี้:

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

คุณสามารถไปที่รูทหลักของคุณได้เช่นนี้

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

คุณจะต้องฉีดเส้นทางที่ใช้งานปัจจุบันในตัวสร้าง

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

  }

constructor(private router: Router) {}

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

เราเตอร์รองรับ

• เส้นทางที่แน่นอน/xxx- เริ่มต้นที่เราเตอร์ขององค์ประกอบราก
• เส้นทางสัมพัทธ์xxx- เริ่มต้นบนเราเตอร์ของส่วนประกอบปัจจุบัน
• เส้นทางสัมพัทธ์../xxx- เริ่มต้นบนเราเตอร์หลักของส่วนประกอบปัจจุบัน

เพื่อนำทางไปยังองค์ประกอบหลักโดยไม่คำนึงถึงจำนวนพารามิเตอร์ในเส้นทางปัจจุบันหรือเส้นทางหลัก: อัปเดต Angular 6 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);

สิ่งนี้มีโบนัสเพิ่มเติมจากการเป็นเส้นทางที่แน่นอนที่คุณสามารถใช้กับเราเตอร์ซิงเกิลตัน

(แน่นอนว่า Angular 4+ น่าจะเป็น Angular 2 ด้วย)

อีกวิธีหนึ่งอาจเป็นเช่นนี้

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

และนี่คือตัวสร้าง

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

โดยไม่ต้องกังวลใจมาก:

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

พารามิเตอร์".. "ทำให้การนำทางขึ้นหนึ่งระดับเช่น parent :)

เส้นทางของฉันมีรูปแบบดังนี้:

• ผู้ใช้ / แก้ไข / 1 -> แก้ไข
• ผู้ใช้ / create / 0 -> สร้าง
• ผู้ใช้ / -> รายการ

ตัวอย่างเช่นเมื่อฉันอยู่ในหน้าแก้ไขและฉันต้องการกลับไปที่หน้ารายการฉันจะส่งคืน 2 ระดับขึ้นไปบนเส้นทาง

เมื่อคิดอย่างนั้นฉันจึงสร้างเมธอดของฉันด้วยพารามิเตอร์ "ระดับ"

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

ดังนั้นในการเปลี่ยนจากแก้ไขไปยังรายการฉันเรียกวิธีการเช่นนั้น:

this.goBack(2);

หากคุณใช้คำสั่ง uiSref คุณสามารถทำได้

uiSref="^"

ทางออกของฉันคือ:

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

และการRouterฉีด:

private readonly _router: Router

สิ่งนี้ไม่ได้ผลสำหรับฉัน ... ฉันต้องใช้:

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

private router: Router

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

เพิ่มตำแหน่งให้กับตัวสร้างของคุณจาก @angular/common

constructor(private _location: Location) {}

เพิ่มฟังก์ชันด้านหลัง:

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

แล้วในมุมมองของคุณ:

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