我正在尝试做孩子路由。这是我的文件夹结构。
app
|--home/
| |--home.component.ts
|--login/
| |--login.ts
|--appShell/
| |--app.component.ts
|--apps/
|--hero/
|--hero-shell.component.ts
|--hore.component.ts
|--hero-detail.component.ts
app.component.ts中的
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
})
@RouteConfig([
{
path: '/app/apps/hero/...',
name: 'Hero Sample',
component: HeroShellComponent,
//useAsDefault: true
},
{ path: '/', redirectTo: ['Login'] },
{ path: '/home', name: 'Home', component: HomeComponent },
{ path: '/login', name: 'Login', component: Login },
])
export class AppComponent {
title = 'Apps';
constructor(public _auth: Authentication,
public router: Router
) {}
onLogout() {
this._auth.logout();
this.router.navigate(['/Login'])
}
}
在home.component.html
中<li><a [routerLink]="['Hero Sample']">Hero Sample</a></li>
在hero-shell.component.ts
中@Component({
selector: 'my-app',
templateUrl: 'app/apps/hero/hero-shell.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
})
@RouteConfig([
{
path: '/shell',
name: 'Hero Sample',
component: HeroShellComponent, useAsDefault: true
},
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
},
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
},
{
path: '/detail/:_id',
name: 'HeroDetail',
component: HeroDetailComponent
},
])
export class HeroShellComponent {
title = 'Hero Sample App';
constructor(public _auth: Authentication,
public router: Router
) {}
}
我一直收到错误:ORIGINAL EXCEPTION: Child routes are not allowed for "/shell". Use "..." on the parent's route path.
我已阅读相关的SO帖子并遵循建议。我错过了什么?
更新
如果我删除
{
path: '/shell',
name: 'Hero Sample',
component: HeroShellComponent, useAsDefault: true
},
然后我得到了EXCEPTION: Link "["Hero Sample"]" does not resolve to a terminal instruction. in [['Hero Sample'] in HomeComponent@7:32]
。
答案 0 :(得分:0)
刚想出来。
在hero-shell.component.ts
中@RouteConfig([
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent, useAsDefault: true
},
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
//useAsDefault: true
},
{
path: '/detail/:_id',
name: 'HeroDetail',
component: HeroDetailComponent
},
])
其他一切都保持不变。