111

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

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

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

知道怎么做吗？

4

13 回答 13

180

你想要一个链接/HTML还是你想要命令式/在代码中路由？

Link：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});
于 2016-08-07T03:55:35.917 回答
59

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

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

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

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

于 2017-04-22T08:46:28.640 回答
40

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

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

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

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

  }
于 2018-11-15T20:46:26.073 回答
8 
constructor(private router: Router) {}

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

路由器支持

  • 绝对路径/xxx- 在根组件的路由器上启动
  • 相对路径xxx- 在当前组件的路由器上启动
  • 相对路径../xxx- 在当前组件的父路由器上启动
于 2016-05-13T08:19:39.737 回答
8

事不宜迟：

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

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

于 2019-11-12T14:44:56.677 回答
7

另一种方式可能是这样的

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

这是构造函数

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }
于 2019-05-01T08:33:59.750 回答
6

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

于 2017-11-22T04:04:42.603 回答
1

我的路线有这样的模式：

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

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

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

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

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

this.goBack(2);
于 2018-02-07T11:42:43.980 回答
0

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

uiSref="^"
于 2019-12-15T16:17:41.793 回答
0

我的解决方案是：

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
于 2020-01-30T21:02:01.867 回答
0

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

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“/”后的最后一部分 --> 获取当前路由。

于 2020-11-30T16:59:53.167 回答
-1

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

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

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

relativeLinkResolution?: 'legacy' | 'corrected'

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

最近几天我一直在为路由而苦苦挣扎，结果发现相对路由中曾经有一个错误。这解决了它。

于 2021-06-24T07:39:21.723 回答
-2

将 Location 添加到您的构造函数中@angular/common

constructor(private _location: Location) {}

添加后退功能：

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

然后在你看来：

<button class="btn" (click)="back()">Back</button>
于 2016-05-13T08:02:48.957 回答