[英]Angular2 Router Navigation
I'm trying to test out router navigation in my application, however each time I attempt to navigate to my url I get thrown back to the homepage.我正在尝试在我的应用程序中测试路由器导航,但是每次我尝试导航到我的 url 时,我都会被扔回主页。
The router should navigate to the next page when the user selects a row to complete a form, like this:当用户选择一行来完成表单时,路由器应该导航到下一页,如下所示:
onUserRowSelect(event): void {
this.router.navigate(['myform']);}
However, myforms is not being navigated to, heres how I defined the routes:但是,没有导航到 myforms,以下是我定义路由的方式:
const routes: Routes = [
{
path: '',
component: UserAdminComponent,
children: [
{
path: 'createuser',
component: CreateUserComponent
},
{
path: 'updateuser',
component: UpdateUserComponent,
children: [
{
path: 'myform',
component: UpdateFormComponent,
}
]
},
]
},
]; ];
So the navigate to myURL/useradmin/updateuser/myform
does not work at all (if the child routes are working even).所以导航到
myURL/useradmin/updateuser/myform
根本不起作用(如果子路由甚至工作)。
I can elaborate more if needed.如果需要,我可以详细说明。 Thank you
谢谢
If you want to navigate to a child route of the current route (eg from updateuser
to updateuser/myform
), you can use relative navigation:如果你想导航到当前路由的子路由(例如从
updateuser
到updateuser/myform
),你可以使用相对导航:
import { Router, ActivatedRoute } from '@angular/router';
constructor(
private route: ActivatedRoute,
private router: Router) {
}
onUserRowSelect(event): void {
this.router.navigate(['./myform'], { relativeTo: this.route });
}
You can find many more navigation cases in this detailed answer by TetraDev .您可以在TetraDev 的这个详细答案中找到更多导航案例。
Update : if the UpdateFormComponent
is to replace the UpdateUserComponent
when navigating, then they should both be direct children of UserAdminComponent
:更新:如果
UpdateFormComponent
在导航时替换UpdateUserComponent
,那么它们都应该是UserAdminComponent
直接子项:
const routes: Routes = [
{
path: '',
component: UserAdminComponent,
children: [
{
path: 'createuser',
component: CreateUserComponent
},
{
path: 'updateuser',
component: UpdateUserComponent
},
{
path: 'myform',
component: UpdateFormComponent
}
]
}];
and the navigation would be perform this way:并且导航将以这种方式执行:
onUserRowSelect(event): void {
this.router.navigate(['../myform'], { relativeTo: this.route });
}
您应该提供从父级开始的完整路径
this.router.navigate(['useradmin','updateuser','myform']);}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.