我的问题相当经典。我有一个应用程序的私有部分,它在 登录表单
后面。当登录成功后,它会进入到管理应用程序的 子路由
。
我的问题是,我无法使用 全局导航菜单
,因为路由器试图在 AdminComponent
中进行路由而不是在 AppComponent
中进行路由。所以我的导航菜单出现了问题。
另一个问题是,如果有人想直接访问URL,我希望将其重定向到父级的“登录”路由。但我做不到。对我来说,这两个问题看起来很相似。
有什么想法可以解决吗?
我的问题相当经典。我有一个应用程序的私有部分,它在 登录表单
后面。当登录成功后,它会进入到管理应用程序的 子路由
。
我的问题是,我无法使用 全局导航菜单
,因为路由器试图在 AdminComponent
中进行路由而不是在 AppComponent
中进行路由。所以我的导航菜单出现了问题。
另一个问题是,如果有人想直接访问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});
router.navigate(string)
方法在当前版本的Angular(2.2)中似乎不存在。我在文档中搜索,只找到了navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
。或者是我完全错过了什么? - TomatogoUp
这样的方法。 - Simon Hansen截至2017年春季,这对我似乎有效:
goBack(): void {
this.router.navigate(['../'], { relativeTo: this.route });
}
ActivatedRoute
和 Router
时,导入如下所示:
import { ActivatedRoute, Router } from '@angular/router';
parentPath
:'work:queue'(具有子级),并且这些子级使用参数加载子模块。fullCurrentPath
:'work/shipping/module/list'。以上代码无法从fullCurrentPath
加载parentPath
。 - Don Thomas Boylethis.router.navigate(['.'], { relativeTo: this.activeRoute.parent });
您需要在构造函数中注入当前活动的路由。
constructor(
private router: Router,
private activeRoute: ActivatedRoute) {
}
this.router.navigate(['.'], {relativeTo: this.activeRoute.parent});
在以下情况下可以正确工作:当您在两个路径中使用相同的组件时:/users/create 和 /users/edit/123。在这两种情况下,它都会导航到父级 /users。常规导航 this.router.navigate([".."], {relativeTo: this.activeRoute})
只适用于 users/create,但对于 users/edit/123 将不起作用,因为它将导航到不存在的 /users/edit/ 路由。 - Roganik不多说了:
this.router.navigate(['..'], {relativeTo: this.activeRoute, skipLocationChange: true});
参数'..'可以使得导航上一级,即父级 :)
constructor(private router: Router) {}
navigateOnParent() {
this.router.navigate(['../some-path-on-parent']);
}
该路由器支持以下路径:
/xxx
- 以根组件的路由器为起点xxx
- 以当前组件的路由器为起点../xxx
- 以当前组件的父级路由器为起点../
已经足够熟悉了,但最终还是有歧义的。感谢你的提示。 - Günter Zöchbauer无论当前路由或父级路由中有多少个参数,都可以导航到父级组件: 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);
this._router.navigate([])
达到相同的结果,而this._router.navigate([[]])
只有在父路由不是根路由本身时才会带到父路由。 - DesTroy另一种方式可以像这样
this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL
这是构造函数的部分代码
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router
) { }
每个人都建议使用相对路径,但真正忘记了最重要的部分:相对路径始终取决于您路由中可能存在的参数。
例如,如果您有一个子路由edit/:id
,并且您的id是格式化为/api/something/123
的URI,则为了使用相对路由到达父级,您需要使用[../../../..']
。
换句话说,将URL视为计算机上的目录结构。不要根据路由表中创建的定义来考虑路由。
我的路由模式如下:
例如,当我在编辑页面时,需要返回到列表页面,我将在路由中返回两个级别。
考虑到这一点,我创建了一个带有“级别”参数的方法。
goBack(level: number = 1) {
let commands = '../';
this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}
this.goBack(2);
对我来说这些都没有用......这是我的代码,带有后退功能:
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 中最后一个 "/" 后面的部分 --> 获取当前路由。