Angular2 默认路由 View

Question

我在 app.ts 中定义我所有的路由

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

在仪表盘上，我有一些相对于仪表盘的嵌套路线。
仪表板.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}
)

现在，如果我转到根 url(即“/”)，它会将我重定向到 /dashboard，因为它是默认的(但还没有显示 cmp1/cmp2，因为我还没有点击仪表板上的链接)。
但是，如果我尝试直接访问 /dashboard，它会显示一个空白页面。

我希望在直接访问 /dashboard 时显示仪表板的 View (即从浏览器地址栏访问并且没有子组件 View )。它应该表现得好像我正在访问根 url /。
我怎样才能做到这一点？

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{
}

希望这有帮助:)