Question

我具有以下路线结构（角度5）

export const ROUTES = [
    { path: "", component: ParentComponent,
        children: [
            { path: "childpath/:param1/:param2/:param3", component: ChildComponent,
                children: [{ path: "grandchildpath", redirectTo: "", pathMatch: "full" },
                    { path: "grandchildpath/:param4/:param5", component: GrandchildComponent }]
            }
        ]
    }
];

在ChildComponent中，我将路线称为"grandchildpath"（无参数），我想去"childpath/:param1/:param2/:param3"，但得到

Error: Cannot match any routes. URL segment: "childpath/:param1/:param2/:param3"

Answer 1

相对和绝对导航
导航可以是相对的也可以是绝对的。相对导航将单个URL段替换为另一个URL段，或者将您在routerLink中指定的路径附加到当前路径的末尾。
示例： 说您当前的url是localhost:4200/child/1/2/3

<a [routerLink]="['grandchild',4,5]">Go</a>

这将导致currentpath+'/grandchild/4/5' ---> localhost:4200/child/1/2/3/grandchild/4/5

 <a [routerLink]="['/grandchild',4,5]">Go</a>

如果路径以“ /”开头，则为绝对导航。

这将导致currentpath+'/grandchild/4/5' ---> localhost:4200/grandchild/4/5

绝对导航会替换整个URL。

当您使用Router.navigate()方法导航到路线时，您需要使用ActivatedRoute属性传递relativeTo的实例，因为navigate()方法不知道当前路线。
使用RouterLink指令导航到路由时，无需传递ActivatedRoute的实例，因为RouterLink自动支持ActivatedRoute

解决方案1：使用routerLink指令
在您的child.component.html

中

<a [routerLink]="['grandchild']">Grandchild Without Param</a><br>

解决方案2：
在您的child.component.ts

中

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

      ngOnInit() {
      }

     onNaviagte()
     {
       this.router.navigate(['grandchild'],{relativeTo:this.route});
     }

Live Demo

如何从孙辈到孩子

1 个答案: