Angular2默认路由视图

Question

我在app.ts

中定义了所有路线

@RouteConfig([
    { path: '/dashboard/...', component: Dashboard, name: 'Dashboard', useAsDefault: true }
)

在仪表板上，我有一些相对于dashbaord的嵌套路线 dashboard.ts

@Component({
    template: `<h1>this is dashboard default text</h1>
               <router-outlet></router-outlet>`
});
@RouteConfig([
    { path: '/cmp1' , name: 'Cmp1' , component: cmp1}
    { path: '/cmp2' , name: 'Cmp2' , component: cmp2}
)

现在，如果我转到根网址（即＆＃39; /＆＃39;），它会将我重定向到/dashboard，因为它是默认网址（但不是＃＆} 39; t显示cmp1 / cmp2，因为我还没有点击仪表板上的链接。） 但是，如果我尝试直接访问/dashboard，则会显示一个空白页面。

我想直接访问/dashboard时显示仪表板的视图（即从浏览器地址栏中显示，而没有子组件视图）。它应该表现得好像我访问根网址/ 我怎样才能做到这一点？

Answer 1

您可以使用now dashboard作为actual default dashboard的父级，如下图所示（几乎与Günter相似，我也喜欢这样）

app.ts

@RouteConfig([
    { path: '/dashboard/...', component: Dashboard, name: 'Dashboard', useAsDefault: true }
)

dashboard.ts

@Component({
    template: `<h1>this is dashboard text for all child routes
                    including default dashboard.
               </h1>
               <router-outlet></router-outlet>`
});
@RouteConfig([
    { path: '/' , name: 'DashDefault' , component: DashDefaultCmp, useAsDefault: true},
    { path: '/cmp1' , name: 'Cmp1' , component: cmp1},
    { path: '/cmp2' , name: 'Cmp2' , component: cmp2}
)

dashDefaultCmp.ts

（如果需要，请将其保留为空）

@Component({
        template: `<h1>this is your default dashboard.
                   </h1>`
    });
export class DashDefaultCmp{
}

希望这有助于：）

Answer 2

在您的一条子路线上设置useAsDefault，否则只要您输入/或/dashboard

，路由器就无法知道要显示的组件

Plunker example

<强>更新

使用路由到不显示任何内容的子组件。

@Component({
  selector: 'empty',
  template: ``
})
export class Empty {
}

@Component({
  selector: 'cmp1',
  template: `
  <h2>Cmp1</h2>
`
})
export class Cmp1 {
}

@Component({
  selector: 'cmp2',
  template: `
  <h2>Cmp2</h2>
`
})
export class Cmp2 {
}

@Component({
  selector: 'dashboard',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>Dashboard</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    { path: '/overview' , name: 'Overview' , component: Empty}
    { path: '/cmp1' , name: 'Cmp1' , component: Cmp1}
    { path: '/cmp2' , name: 'Cmp2' , component: Cmp2}
)
export class Dashboard {
}

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>Hello {{name}}</h2>
  <a href="#" [routerLink]="['Dashboard', 'Overview']">Dashboard</a>
  <a href="#" [routerLink]="['Dashboard', 'Cmp1']">Cmp1</a>
  <a href="#" [routerLink]="['Dashboard', 'Cmp2']">Cmp2</a>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    { path: '/dashboard/...', component: Dashboard, name: 'Dashboard', useAsDefault: true },
])
export class App {
}

Plunker example