[英]Angular - URL changed but view not loaded
This is my app-routing-module.ts
这是我的
app-routing-module.ts
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: ':id/:name', component: ChildComponent }
]
}
]
},
];
I've written a function to check if the URL is working with a static value in parent.component.ts
. 我编写了一个函数来检查URL是否在
parent.component.ts
使用静态值。
goToChild() {
this.router.navigate(['1/john'], { relativeTo: this.route });
}
And I call the function in the parent.component.html
. 我在
parent.component.html
调用该函数。
<button class="btn btn-primary" (click)="goToChild()">Search</button>
When I click the button, I get the correct URL in the address bar, 当我点击按钮时,我在地址栏中获得了正确的URL,
localhost:3000/parent/1/john
But the view never loads, it stays on the parent.component.html
. 但是视图永远不会加载,它会保留在
parent.component.html
。 I'm fairly new to Angular and I'm using version 5. 我是Angular的新手,我使用的是版本5。
And if I have my routes like this, it works fine. 如果我有这样的路线,它工作正常。
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'parent',
component: ParentComponent
},
{
path: 'parent/:id/:name', component: ChildComponent
}
]
},
];
It feels more appropriate for me to put the ChildComponent
route under children array of the ParentComponent
, but when I do it. 将
ChildComponent
路由放在ParentComponent
children数组下,但是当我这样做时,感觉更合适。 Only the URL changes, not the view. 只有URL更改,而不是视图。
Any help will be much appreciated. 任何帮助都感激不尽。
You need to add a <router-outlet></router-outlet>
inside the template. 您需要在模板中添加
<router-outlet></router-outlet>
。 That's how you allow child navigation 这就是你允许儿童导航的方式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.