首页 文章

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

提问于
浏览
42

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

我的问题是我无法使用 global navigation menu 因为路由器尝试在我的 AdminComponent 而不是我的 AppCompoment 中路由 . 所以我的导航打破了 .

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

知道如何做到这一点?

7 回答

  • 4

    你想要一个链接/ 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],
    

    Imperativenavigate() 方法需要一个起点(即 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});
    
  • 1

    从2017年 Spring 季开始,这似乎对我有用:

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

    您的组件ctor接受 ActivatedRouteRouter ,导入如下:

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

  • 5

    无论当前路线或父路线中的参数数量如何,都要导航到父级 component

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

    这还有一个额外的好处,就是你可以使用单一路由器的绝对路由 .

    (肯定是Angular 4,也可能是Angular 2 . )

  • 0
    constructor(private router: Router) {}
    
    navigateOnParent() {
      this.router.navigate(['../some-path-on-parent']);
    }
    

    路由器支持

    • 绝对路径 /xxx - 在根组件的路由器上启动

    • relative paths xxx - 在当前组件的路由器上启动

    • relative paths ../xxx - 在当前组件的父路由器上启动

  • 28

    @angular/common 向构造函数添加位置

    constructor(private _location: Location) {}
    

    添加后退功能:

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

    然后在你看来:

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

    我的路线有这样的模式:

    • user / edit / 1 - >编辑

    • user / create / 0 - >创建

    • user / - >列表

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

    考虑到这一点,我使用“level”参数创建了我的方法 .

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

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

    this.goBack(2);
    
  • 82

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

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

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

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

相关问题