Angular 2 - 如何使用 this.router.parent.navigate('/about') 导航到另一条路线?
Angular 2 - How do I navigate to another route using this.router.parent.navigate('/about')?
Angular 2 - 如何使用 this.router.parent.navigate('/about')
导航到另一条路线?
好像不行。
我尝试了 location.go("/about");
,因为那没有用。
基本上,一旦用户登录,我想将他们重定向到另一个页面。
下面是我的代码:
import {Component} from 'angular2/angular2';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {Router} from 'angular2/router';
import {AuthService} from '../../authService';
//Model
class User {
constructor(public email: string, public password: string) {}
}
@Component({
templateUrl:'src/app/components/todo/todo.html',
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class Todo {
model = new User('Mark@gmail.com', 'Password');
authService:AuthService;
router: Router;
constructor(_router: Router, _authService: AuthService){
this.authService = _authService;
this.router = _router;
}
onLogin = () => {
this.authService.logUserIn(this.model).then((success) => {
//This is where its broke - below:
this.router.parent.navigate('/about');
});
}
}
你应该使用
this.router.parent.navigate(['/About']);
除了指定路由路径,您还可以指定路由名称:
{ path:'/About', name: 'About', ... }
this.router.parent.navigate(['About']);
没有parent
也可以使用
路由器定义如下:
{path:'/about', name: 'About', component: AboutComponent}
然后可以通过 name
而不是 path
导航
goToAboutPage() {
this.router.navigate(['About']); // here "About" is name not path
}
更新为 V2.3.0
在 v2.0 的路由中 名称 属性 不再存在。没有 name 属性 的路由定义。所以你应该使用 path 而不是 name。 this.router.navigate(['/path'])
和 路径没有前导斜杠 所以使用 path: 'about'
而不是 path: '/about'
路由器定义如:
{path:'about', component: AboutComponent}
然后可以通过path
导航
goToAboutPage() {
this.router.navigate(['/about']); // here "About" is path
}
绝对路径路由
有 2 种导航方法,.navigate()
和 .navigateByUrl()
绝对路径路由可以使用方法.navigateByUrl()
:
import {Router} from '@angular/router';
constructor(private router: Router) {}
navigateToLogin() {
this.router.navigateByUrl('/login');
}
您将绝对路径放入要导航到的组件的 URL。
注意:调用路由器的navigateByUrl
方法时,一定要指定完整的绝对路径。绝对路径必须以 /
开头
// Absolute route - Goes up to root level
this.router.navigate(['/root/child/child']);
// Absolute route - Goes up to root level with route params
this.router.navigate(['/root/child', crisis.id]);
相对路径路由
如果要使用相对路径路由,使用.navigate()
方法。
注意:路由的工作方式有点不直观,尤其是父路由、兄弟路由和子路由:
// Parent route - Goes up one level
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });
// Sibling route - Stays at the current level and moves laterally,
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });
// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });
// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });
// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'.
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });
或者如果您只需要在当前路由路径内导航,但导航到不同的路由参数:
// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });
Link 参数数组
一个 link 参数数组包含路由器导航的以下成分:
- 到目标组件的路由路径。
['/hero']
- 进入路由的必需和可选路由参数 URL。
['/hero', hero.id]
或 ['/hero', { id: hero.id, foo: baa }]
类似目录的语法
路由器在 link 参数列表中支持类似目录的语法,以帮助指导路由名称查找:
./
或没有相对于当前级别的前导斜杠。
../
在路由路径中上一层。
您可以将相对导航语法与祖先路径相结合。如果您必须导航到同级路由,您可以使用 ../<sibling>
约定向上一层,然后在同级路由路径上向下移动。
关于相对导航的重要说明
要使用 Router.navigate
方法导航相对路径,您必须提供 ActivatedRoute
以告知路由器您在当前路由树中的位置。
在 link 参数数组之后,添加一个 relativeTo
属性 设置为 ActivatedRoute
的对象。然后路由器根据活动路由的位置计算目标 URL。
就我个人而言,我发现自从我们维护 ngRoutes
collection(长话短说)以来,我从以下方面找到了最大的乐趣:
GOTO(ri) {
this.router.navigate(this.ngRoutes[ri]);
}
我实际上将它用作我们面试问题之一的一部分。这样,我可以 near-instant 通过观察谁在 运行 进入 GOTO(1)
进行主页重定向时抽搐,从而了解谁一直在不断发展。
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}
//navigation
link.this.router.navigateByUrl('/home');
Angular 2 - 如何使用 this.router.parent.navigate('/about')
导航到另一条路线?
好像不行。
我尝试了 location.go("/about");
,因为那没有用。
基本上,一旦用户登录,我想将他们重定向到另一个页面。
下面是我的代码:
import {Component} from 'angular2/angular2';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {Router} from 'angular2/router';
import {AuthService} from '../../authService';
//Model
class User {
constructor(public email: string, public password: string) {}
}
@Component({
templateUrl:'src/app/components/todo/todo.html',
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class Todo {
model = new User('Mark@gmail.com', 'Password');
authService:AuthService;
router: Router;
constructor(_router: Router, _authService: AuthService){
this.authService = _authService;
this.router = _router;
}
onLogin = () => {
this.authService.logUserIn(this.model).then((success) => {
//This is where its broke - below:
this.router.parent.navigate('/about');
});
}
}
你应该使用
this.router.parent.navigate(['/About']);
除了指定路由路径,您还可以指定路由名称:
{ path:'/About', name: 'About', ... }
this.router.parent.navigate(['About']);
没有parent
路由器定义如下:
{path:'/about', name: 'About', component: AboutComponent}
然后可以通过 name
而不是 path
goToAboutPage() {
this.router.navigate(['About']); // here "About" is name not path
}
更新为 V2.3.0
在 v2.0 的路由中 名称 属性 不再存在。没有 name 属性 的路由定义。所以你应该使用 path 而不是 name。 this.router.navigate(['/path'])
和 路径没有前导斜杠 所以使用 path: 'about'
而不是 path: '/about'
路由器定义如:
{path:'about', component: AboutComponent}
然后可以通过path
goToAboutPage() {
this.router.navigate(['/about']); // here "About" is path
}
绝对路径路由
有 2 种导航方法,.navigate()
和 .navigateByUrl()
绝对路径路由可以使用方法.navigateByUrl()
:
import {Router} from '@angular/router';
constructor(private router: Router) {}
navigateToLogin() {
this.router.navigateByUrl('/login');
}
您将绝对路径放入要导航到的组件的 URL。
注意:调用路由器的navigateByUrl
方法时,一定要指定完整的绝对路径。绝对路径必须以 /
// Absolute route - Goes up to root level
this.router.navigate(['/root/child/child']);
// Absolute route - Goes up to root level with route params
this.router.navigate(['/root/child', crisis.id]);
相对路径路由
如果要使用相对路径路由,使用.navigate()
方法。
注意:路由的工作方式有点不直观,尤其是父路由、兄弟路由和子路由:
// Parent route - Goes up one level
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });
// Sibling route - Stays at the current level and moves laterally,
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });
// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });
// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });
// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'.
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });
或者如果您只需要在当前路由路径内导航,但导航到不同的路由参数:
// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });
Link 参数数组
一个 link 参数数组包含路由器导航的以下成分:
- 到目标组件的路由路径。
['/hero']
- 进入路由的必需和可选路由参数 URL。
['/hero', hero.id]
或['/hero', { id: hero.id, foo: baa }]
类似目录的语法
路由器在 link 参数列表中支持类似目录的语法,以帮助指导路由名称查找:
./
或没有相对于当前级别的前导斜杠。
../
在路由路径中上一层。
您可以将相对导航语法与祖先路径相结合。如果您必须导航到同级路由,您可以使用 ../<sibling>
约定向上一层,然后在同级路由路径上向下移动。
关于相对导航的重要说明
要使用 Router.navigate
方法导航相对路径,您必须提供 ActivatedRoute
以告知路由器您在当前路由树中的位置。
在 link 参数数组之后,添加一个 relativeTo
属性 设置为 ActivatedRoute
的对象。然后路由器根据活动路由的位置计算目标 URL。
就我个人而言,我发现自从我们维护 ngRoutes
collection(长话短说)以来,我从以下方面找到了最大的乐趣:
GOTO(ri) {
this.router.navigate(this.ngRoutes[ri]);
}
我实际上将它用作我们面试问题之一的一部分。这样,我可以 near-instant 通过观察谁在 运行 进入 GOTO(1)
进行主页重定向时抽搐,从而了解谁一直在不断发展。
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}
//navigation
link.this.router.navigateByUrl('/home');