Question

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

我的问题是我无法使用global navigation menu，因为路由器尝试在我的AdminComponent而不是AppCompoment中进行路由。所以导航很糟糕。

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

知道如何做到这一点吗？

Answer 1

您想要链接/ HTML还是想要在代码中强制路由？

链接：RouterLink指令始终将提供的链接视为当前网址的增量：

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

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

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

  }

Answer 4

要导航到父组件，无论当前路线或父路线中的参数数量如何： 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 5

constructor(private router: Router) {}

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

路由器支持

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

Answer 6

从@angular/common

向您的构造函数添加位置

constructor(private _location: Location) {}

添加后退功能：

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

然后在你看来：

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

Answer 7

事不宜迟

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

参数'..'使导航向上一级，即父级：）

Answer 8

我的路线有这样的模式：

user / edit / 1 - ＆gt;修改
user / create / 0 - ＆gt;创建
用户/ - ＆gt;列表

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

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

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

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

this.goBack(2);

Answer 9

另一种方式可能是这样

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

这是构造函数

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

Answer 10

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

uiSref="^"

Answer 11

我的解决方法是：

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 12

这些都不适合我...我不得不使用：

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

private router: Router

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

Answer 13

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

<块引用>

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

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

relativeLinkResolution?: 'legacy' | 'corrected'

启用错误修复，以更正具有空路径的组件中的相对链接解析。
<<截图>>
更正了 v11 中的默认值。

过去几天我一直在为路由而苦苦挣扎，结果过去相对路由中存在错误。这修复了它。

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

13 个答案: