这是我的app-routing-module.ts
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: ':id/:name', component: ChildComponent }
]
}
]
},
];
我已经编写了一个函数来检查网址是否使用parent.component.ts
中的静态值。
goToChild() {
this.router.navigate(['1/john'], { relativeTo: this.route });
}
我在parent.component.html
中调用该函数。
<button class="btn btn-primary" (click)="goToChild()">Search</button>
当我点击按钮时,我会在地址栏中找到正确的网址
localhost:3000/parent/1/john
但视图永远不会加载,它会保留在parent.component.html
上。我对Angular很新,我使用的是版本5.
如果我有这样的路线,那就可以了。
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'parent',
component: ParentComponent
},
{
path: 'parent/:id/:name', component: ChildComponent
}
]
},
];
将ChildComponent
路径放在ParentComponent
的子数组下,但是当我这样做时,感觉更合适。只有URL更改,而不是视图。
非常感谢任何帮助。
答案 0 :(得分:3)
你能分享当前的parent.component.html吗?你在模板里面有<router-outlet></router-outlet>
吗?这就是你允许儿童导航的方式