简体   繁体   English

Angular2 rc1路由器通过URL导航

[英]Angular2 rc1 router navigate by url

I have parent component with url /app when I enter enter into that component, by default following component is loaded with following routes: 当我进入该组件时,我的父组件带有url / app,默认情况下,以下组件加载了以下路由:

@Routes([
   { path: '/users', component: UserComponent },
   { path: '/other', component: OtherComponent }
])

and I am implementing OnInit interface: 我正在实现OnInit接口:

ngOnInit() {
    this.router.navigate(['users'], this.currSegment);
}

Since parent route is /app and child is implementing ngOnInit I can navigate to users, but if I want directly to navigate through url to route /other it is impossible. 由于父级路由是/ app,子级正在实现ngOnInit,因此我可以导航到用户,但是如果我想直接在URL中导航以路由/ other,则不可能。

There are two methods availabel for the same 相同的方法有两种

  • router.navigate(['.....'])
  • router.navigateByUrl('.....')

if your going to use first one than you can use like this 如果您要使用第一个,则可以像这样使用

this.router.navigate(['/users']);

which accepts array with route name 接受带有路由名称的数组

and in second case you have to pass string as parameter like this 在第二种情况下,您必须像这样传递字符串作为参数

this.router.navigateByUrl('/app/users');

passing parameter 传递参数

if you want to send routing parameter along with routing than you can use like this 如果要与路由一起发送路由参数,则可以像这样使用

this.router.navigateByUrl('/app/users/'+id); this.router.navigateByUrl('/ app / users /'+ id);

where id is your data/key whatever id是您的数据/密钥,无论

see also 也可以看看

You need to declare your @Route params: 您需要声明@Route参数:

@Route([
  { path: '/users/:id', component: UsersComponent }
])
export class MyComponent implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    // assuming this.userId comes from somewhere
    this.router.navigate(['/users/', this.userId]);
  }
}

If you need to access your params, you can use RouteSegment in your constructor: 如果需要访问参数,则可以在构造函数中使用RouteSegment

constructor(private segment: RouteSegment) {
  this.userId = segment.getParam('id');
}

在angular2 rc1中,不再有用于路由的name参数,您现在必须使用以下代码导航到其他页面

this._router.navigate(['/users']);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM