我在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}
)

现在,如果我转到根url(即'/'),它将把我重定向到/dashboard,因为它是默认的(但还没有显示cmp1/cmp2,因为我还没有单击仪表板上的链接)。
但是,如果我试图直接访问/dashboard,它会显示一个空白页。
我希望在直接访问/dashboard时显示仪表板的视图(即从浏览器地址栏访问而不使用子组件视图)。它的行为应该类似于我访问根url/
我怎样才能做到这一点?

最佳答案

您可以使用now dashboard作为actual default dashboard的父级,如下所示(几乎类似于gunter's,我也有这样的父级)
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{
}

希望这有帮助:)

10-05 21:11
查看更多