定义但未识别的Angular2 RC1子路线 [英] Angular2 RC1 child routes defined but not recognized
问题描述
过去用于beta/...的东西不再起作用.使用新的新RC1路由器,我该如何进行子级路由?
What used to work for beta /... is no longer working. With the new new RC1 router, how do I do the child routing?
文件夹结构
app
|--home/
| |--home.component.ts
|--login/
| |--login.ts
|--appShell/
| |--app.component.ts
|--apps/
|--hero/
|--hero-shell.component.ts
|--horees.component.ts
|--hero-detail.component.ts
计划的导航为
app.component -> home.component -> heroshell.component -> heroes.component
app.component.ts路线
app.component.ts routes
@Routes([
{ path: '/heroshell', component: HeroShellComponent },
{ path: '/home', component: HomeComponent },
{ path: '/login', component: Login },
])
export class AppComponent implements OnInit {
title = 'Apps';
constructor(public _auth: Authentication,
public router: Router,
private _dialogService: DialogService
) {}
ngOnInit() {
this.router.navigate(['/login']);
}
.......
成功登录后,Login类将
Once logged in successful, The Login class will
this.router.navigate(['/home']);
我可以从HomeComponent.ts
From HomeComponent.ts I can do
this.router.navigate(['/heroshell']);
到目前为止,一切都很好,没问题. 在hero-shell.component.ts中,我有子路由
So far so good, no problem. In hero-shell.component.ts I have child route
@Component({
selector: 'my-app1',
templateUrl: 'app/apps/hero/hero-shell.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [HeroService]
})
@Routes([
{ path: 'heroes', component: HeroesComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'hero/:_id', component: HeroDetailComponent},
])
export class HeroShellComponent { // implements OnInit
title = 'Hero Sample App';
constructor(public _auth: Authentication,
public router: Router
) {}
}
在hero-shell.component.html
in hero-shell.component.html
<my-app1>
<h1>{{title}}</h1>
<!--<button *ngIf="_auth.loggedIn" (click)="onLogout()">Logout</button>-->
<nav>
<a [routerLink]="['dashboard']">Dashboard</a>
<a [routerLink]="['heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
</my-app1>
请注意,路径只能是'heroes'
.如果我将其更改为[routerLink],将@Routes更改为'/heroes'
,将无法使用.可以帮忙解释一下原因吗?
Note that the path can only be 'heroes'
. if I change to [routerLink] and @Routes to '/heroes'
it won't work. Can some help explain why?
因此它现在可以识别子路由.单击routerLink英雄,将显示英雄列表.但是当我通过
And so it can recognize the child routes now. Click on routerLink heroes will display the hero list. But when I detailed it from HeroesComponent by
this._router.navigate(['hero/'+hero._id]);
它爆炸了
browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise):
Cannot match any routes. Current segment: 'hero'.
Available routes: ['/heroshell', '/home', '/login'].
这很奇怪.如果无法识别子路线,我该如何首先进入HeroesComponent?现在子路线刚刚消失了.
This is very strange. If it does not recognize the child routes how can I even get into HeroesComponent in the first place? And now the child routes just disappeared.
如果我使用
this._router.navigate(['hero/'+hero._id],this.currSegment);
它将给出不同的错误
browser_adapter.ts:78 EXCEPTION:
Error: Uncaught (in promise): Component 'HeroesComponent' does not have route configuration
那么这是否意味着所有子组件都必须在其上反复使用@Routes?
So does that mean all the child components have to have @Routes on them repeatedly?
推荐答案
请注意,路径只能是英雄".如果我将其更改为[routerLink],将@Routes更改为"/heroes",则将无法使用.可以帮忙解释一下原因吗?
Note that the path can only be 'heroes'. if I change to [routerLink] and @Routes to '/heroes' it won't work. Can some help explain why?
实际上,子路由器中的路径可以包含"/"作为前缀,但是将routerLink更改为"/heroes"使其无法工作,因为导航路径中的"/"前缀将使用根路由器进行解析,并且确实没有"/heroes"路径.之所以使用英雄"路径是因为它将使用当前路由器来解析,并且您已在当前子路由器中定义了该路径.
Actually paths in child router can contain "/" as prefix but changing routerLink to "/heroes" made it not work because "/" prefix in navigation path will be resolved using root router and does not have "/heroes" path. "heroes" path worked because it will be resolved using current router and you defined that path in current child router.
this._router.navigate(['hero/'+ hero._id]);
this._router.navigate(['hero/'+hero._id]);
不使用段调用导航"将使用根路由器来解决.这意味着您要进行绝对导航.显然这是行不通的.
Calling "navigate" without a segment will be resolved using root router. It means you want to do absolute navigation. Obviously this will not work.
this._router.navigate(['hero/'+ hero._id],this.currSegment);
this._router.navigate(['hero/'+hero._id],this.currSegment);
这也不起作用,因为您位于HeroesComponent和"heroes"网段,该组件中没有路由器配置.正确的呼叫应为:
This also did not work because you are at HeroesComponent and "heroes" segment, there is no router configuration in the component. The correct call should be:
this._router.navigate(['../hero', {_id: hero._id}], this.currSegment);
这篇关于定义但未识别的Angular2 RC1子路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!