路由问题父的根

Question

我的应用程序设置如下：

@RouteConfig([
    {path: '/', redirectTo: ['Login']},
    {path: '/login', name: 'Login', component: LoginComponent},
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
    {path: '/gamers/...', name:'Gamers', component: GamersComponent}
])

在我的GamersComponent中，我有：

@Component({
    selector:'gamers',
    templateUrl: 'app/gamers/gamers.html',
    directives:[]
})

@RouteConfig([
    {path: '/addGamer', name: 'AddGamer', component: AddGamerComponent},
{path: '/editGamer', name: 'EditGamer', component: EditGamerComponent}
])

export class GamersController{
    constructor(){
    }
}

和我的gamers.html：

<h1>Gamers</h1>
<a href="#" [routerLink]="['AddGamer']">Add Gamer</a>
<a href="#" [routerLink]="['EditGamer']">Edit Gamer</a>
<gamers></gamers>
<router-outlet></router-outlet>

我的问题是：

如何创建一个链接，该链接会将我重定向到“游戏玩家”，这样我就可以在<gamers></gamers>中看到<router-outlet>内容没有任何一个孩子的内容？

到目前为止，当我重定向到Gamers时，出现以下错误：

EXCEPTION: Link "["Gamers"]" does not resolve to a terminal instruction. in [['Gamers'] in NavigationComponent@5:20]

Answer 1

你可以像这样使用routerLink：

<a routerLink="['/Gamers']">Gamers</a>

这样您将使用根路由器中配置的路由而不是当前路由中的路由（子路由器）。

修改

您需要为游戏玩家定义默认子路线：

@Component({
  selector:'gamers',
  template: `
    <h1>Gamers</h1>
    <a [routerLink]="['AddGamer']">Add Gamer</a>
    <a [routerLink]="['EditGamer']">Edit Gamer</a>
    <!--gamers></gamers-->
    <router-outlet></router-outlet>
  `,
  directives:[ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/', name: 'GamersHome', component: GamersHomeComponent, useAsDefault: true},
  {path: '/addGamer', name: 'AddGamer', component: AddGamerComponent},
  {path: '/editGamer', name: 'EditGamer', component: EditGamerComponent}
])
export class GamersComponent {
  constructor(){
  }
}

请参阅此plunkr：https://plnkr.co/edit/rQluijSidf4tF1LZgKsG?p=preview