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

Question

我的问题很经典。我有一个应用程序的私有部分，它位于login form 后面。登录成功后，转到管理应用程序的子路由。

我的问题是我不能使用global navigation menu，因为路由器试图在我的AdminComponent 中路由，而不是我的AppCompoment。所以我的导航坏了。

另一个问题是，如果有人想直接访问 URL，我想重定向到父“登录”路由。但我不能让它工作。在我看来，这两个问题是相似的。

知道怎么做吗？

Answer 1

您想要链接/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});

Answer 2

截至 2017 年春季，这似乎对我有用：

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

你的组件ctor接受ActivatedRoute和Router的地方，导入如下：

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

Answer 3

你可以像这样导航到你的父根目录

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

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

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

  }

Answer 4

constructor(private router: Router) {}

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

路由器支持

• 绝对路径/xxx - 在根组件的路由器上启动
• 相对路径xxx - 在当前组件的路由器上启动
• 相对路径../xxx - 在当前组件的父路由器上启动

Answer 5

另一种方式可能是这样的

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

这里是构造函数

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

Answer 6

事不宜迟：

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

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

Answer 7

要导航到父组件而不考虑当前路由或父路由中的参数数量：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);

这有一个额外的好处，就是你可以与单例路由器一起使用的绝对路由。

（肯定是 Angular 4+，也可能是 Angular 2。）

Answer 8

我的路线有这样的模式：

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

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

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

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

所以，要从编辑转到列表，我会这样调用方法：

this.goBack(2);

Answer 9

如果您使用的是 uiSref 指令，那么您可以这样做

uiSref="^"

Answer 10

我的解决办法是：

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

Answer 11

这些都不适合我...这是我的带有后退功能的代码：

import { Router } from '@angular/router';
...
constructor(private router: Router) {}
...
back() {
   this.router.navigate([this.router.url.substring(0, this.router.url.lastIndexOf('/'))]);
}

this.router.url.substring(0, this.router.url.lastIndexOf('/') --> 获取当前url“/”后的最后一部分 --> 获取当前路由。

Answer 12

这可能会有所帮助：https://angular.io/api/router/ExtraOptions#relativeLinkResolution

ExtraOptions界面
路由器模块的一组配置选项，在 forRoot() 方法中提供。

interface ExtraOptions {
 // Others omitted
 relativeLinkResolution?: 'legacy' | 'corrected'
}

relativeLinkResolution?: 'legacy' | 'corrected'

启用错误修复，以纠正具有空路径的组件中的相对链接分辨率。
>
更正了 v11 中的默认设置。

过去几天我一直在为路由而苦苦挣扎，结果发现以前在相对路由中存在错误。这解决了它。

Answer 13

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

constructor(private _location: Location) {}

添加后退功能：

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

然后在你看来：

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