angular2儿童路线不允许....使用" ..."在父母的路线上

时间:2016-05-04 22:39:44

标签: angular angular2-routing

我正在尝试做孩子路由。这是我的文件夹结构。

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]

1 个答案:

答案 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
    },

])

其他一切都保持不变。

感谢这个答案http://stackoverflow.com/questions/34317678/routing-in-angular2-link-name-does-not-resolve-to-a-terminal-instruction