如何从子路线导航到父路线？

我的问题很经典。我在后面有一个应用程序的私有部分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 });

您将需要在构造函数中注入当前活动的Route

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+也可能是Angular2。）

另一种方式可能是这样的

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

参数“ ..”使导航向上一级，即父级:)

我的路线具有以下模式：

• 用户/编辑/ 1->编辑
• 用户/创建/ 0->创建
• 用户/->列表

例如，当我在“编辑”页面上并且需要返回列表页面时，我将在路线上返回2个级别。

考虑到这一点，我创建了一个带有“级别”参数的方法。

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

因此，要从编辑转到列表，我将调用如下方法：

this.goBack(2);

将位置从添加到构造函数 @angular/common

constructor(private _location: Location) {}

添加后退功能：

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

然后您认为：

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

如果您使用的是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