Angular 2路由 - 如何导航到来自子路由的父路由？

我的问题很经典。我有一个隐藏在login form后面的应用程序的私人部分。当登录成功时，它将转到管理应用程序的子路由。Angular 2路由 - 如何导航到来自子路由的父路由？

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

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

任何想法如何完成？

2016-05-12 Carl Boisvert

请添加一些代码，如果 –

添加位置信息的构造从@angular/common

constructor(private _location: Location) {}

添加回功能：

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

，然后在您的视图：

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

来源

2016-05-13 08:02:48 user3021615

这仅适用于你在父路由前面。父路由与浏览器历史无关... – aboveyou00

它导航回，但不导航到组件的父母 –

constructor(private router: Router) {} 

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

路由器支持

绝对路径/xxx - 开始根组件的路由器上
相对路径xxx - 启动的电流分量的路由器上
相对路径- 启动的电流分量

来源

2016-05-13 08:19:39

尽管此代码可能回答该问题，但提供有关_why_和/或_how_的附加上下文，它回答了问题会显着提高其长期价值。请[编辑]你的答案，添加一些解释。 –

@TobySpeight不够公平。我认为'../'已经足够好了，但最终还是不明确。感谢提示。 –

感谢您的回答，我一直在这个网站上工作了很长一段时间，所以Angular显然从那以后一直在更新。我已经在当前版本中尝试了这个解决方案，但它不起作用。让我更新，我会回来后评论。 –

RC.4 +溶液

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

链接：本RouterLink指令始终把提供的链接将作为delta为当前网址：

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

// RC.5+: navigate without updating the URL 
this.router.navigate("../../parent", {relativeTo: this.route, skipLocationChange: true});

来源

2016-08-07 03:55:35

''router.navigate（string）'方法似乎不存在于当前版本的Angular（2.2）中。我搜索了[docs]（https://angular.io/docs/ts/latest/api/router/index/Router-class.html），只找到了'navigate（commands：any []，extras ?: NavigationExtras ）：Promise '。或者我完全错过了什么？ – Tomato

@Tomato，你需要在路线周围放置[]。例如， this.router.navigate（[“../../ parent”]，{relativeTo：this.route}）; – gye

当您在html中使用[routerLink]而不是打字稿时，您如何传递'relativeTo'数据？ – redfox05

这似乎为我工作作为春季2017：

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

如果您的组件构造函数接受ActivatedRoute和Router，进口如下：

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

来源

2017-04-22 08:46:28 ne1410s

导航到父母组件不管参数在目前的路线或数父路线：

let routerLink = this._route.parent.snapshot.pathFromRoot 
     .map(s => s.url).reduce((a, e) => a.concat(e)).map(s => s.path); 

    this._router.navigate(routerLink);

这具有可以与单路由器使用绝对路径的好处。

（角4+肯定的，大概2角过。）

来源

2017-11-22 04:04:42 kayjtea

我的路线有这样一个规律：

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

当我编辑网页上，例如，我需要回到列表页，我将返回2升在路线上放松。

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

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

所以，从编辑到列出我所说的方法类似：

this.goBack(2);

来源

2018-02-07 11:42:43 Carlinhos

Angular 2路由 - 如何导航到来自子路由的父路由？

回答

相关问题