已定义但未识别的 Angular2 RC1 子路由
Angular2 RC1 child routes defined but not recognized
曾经适用于 beta /... 的功能已不再适用。有了新的新RC1路由器,子路由怎么办?
文件夹结构
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 路线
@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']);
}
.......
登录成功后,登录class将
this.router.navigate(['/home']);
从HomeComponent.ts我能做到
this.router.navigate(['/heroshell']);
到目前为止一切顺利,没问题。
在 hero-shell.component.ts 我有子路线
@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
) {}
}
英雄-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'
它将不起作用。能帮忙解释一下为什么吗?
所以它现在可以识别子路由了。点击 routerLink heroes 会显示英雄列表。但是当我通过
从 HeroesComponent 详细说明它时
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._router.navigate(['hero/'+hero._id],this.currSegment);
它会给出不同的错误
browser_adapter.ts:78 EXCEPTION:
Error: Uncaught (in promise): Component 'HeroesComponent' does not have route configuration
那么这是否意味着所有的子组件都必须重复使用@Routes?
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”路径。 "heroes" 路径有效,因为它将使用当前路由器解析,并且您在 当前子路由器 .
中定义了该路径
this._router.navigate(['hero/'+hero._id]);
调用 "navigate" 没有分段将使用根路由器解决。这意味着你想做绝对导航。显然这行不通。
this._router.navigate(['hero/'+hero._id],this.currSegment);
这也不起作用,因为你在 HeroesComponent 和 "heroes" 段,组件中没有路由器配置。正确的调用应该是:
this._router.navigate(['../hero', {_id: hero._id}], this.currSegment);
曾经适用于 beta /... 的功能已不再适用。有了新的新RC1路由器,子路由怎么办?
文件夹结构
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 路线
@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']);
}
.......
登录成功后,登录class将
this.router.navigate(['/home']);
从HomeComponent.ts我能做到
this.router.navigate(['/heroshell']);
到目前为止一切顺利,没问题。 在 hero-shell.component.ts 我有子路线
@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
) {}
}
英雄-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'
它将不起作用。能帮忙解释一下为什么吗?
所以它现在可以识别子路由了。点击 routerLink heroes 会显示英雄列表。但是当我通过
从 HeroesComponent 详细说明它时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._router.navigate(['hero/'+hero._id],this.currSegment);
它会给出不同的错误
browser_adapter.ts:78 EXCEPTION:
Error: Uncaught (in promise): Component 'HeroesComponent' does not have route configuration
那么这是否意味着所有的子组件都必须重复使用@Routes?
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”路径。 "heroes" 路径有效,因为它将使用当前路由器解析,并且您在 当前子路由器 .
中定义了该路径this._router.navigate(['hero/'+hero._id]);
调用 "navigate" 没有分段将使用根路由器解决。这意味着你想做绝对导航。显然这行不通。
this._router.navigate(['hero/'+hero._id],this.currSegment);
这也不起作用,因为你在 HeroesComponent 和 "heroes" 段,组件中没有路由器配置。正确的调用应该是:
this._router.navigate(['../hero', {_id: hero._id}], this.currSegment);