angular - 如何从孙子路由到 child

Question

我有以下路线结构( Angular 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() 方法导航到路由时，您需要使用 relativeTo 属性传递 ActivatedRoute 的实例，因为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