Angular2路由使用（2.0.0-rc.5）路由

Question

对于我正在尝试构建的应用程序，routing 路径应该是这样的：

来自 app.component 的是我的引导类，它包含指向登录和注册页面的链接。尽管仪表板应该在同一级别，但它应该仅在用户注册时可见。在仪表板组件中，有两个子组件，摘要面板和详细面板。

这是我的路由配置：

import { Routes, RouterModule } from '@angular/router';
import {SignInComponent} from "./auth/signin.component";
import {SignUpComponent} from "./auth/signup.component";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {PageNotFoundComponent} from "./error/page-not-found.component";
import {UsageInformationComponent} from "./dashboard/usage-information.component";
import {DetailedInformationComponent} from "./dashboard/detailed-info.component";

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/signin',
        pathMatch: 'full'
    },
    {
        path: 'signin',
        component: SignInComponent
    },
    {
        path: 'signup',
        component: SignUpComponent,
    },
    {
        path: 'dashboard',
        component: DashboardComponent
    },
    {
        path: 'summary',
        component: UsageInformationComponent
    },
    {
        path: 'detail',
        component: DetailedInformationComponent
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

export const routing = RouterModule.forRoot(appRoutes);

这是 app.module 类：

@NgModule(<NgModuleMetadataType>{
    imports: [
        BrowserModule,
        FormsModule,
        routing
    ],
    declarations: [
        AppComponent,
        SignInComponent,
        SignUpComponent,
        DashboardComponent
        UsageInformationComponent,
        DetailedInformationComponent,
        PageNotFoundComponent
    ],
    providers: [
        HeroService,
        AuthService,
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

但每当我尝试访问 Summary 组件时，总是找不到相应的路径，因此会触发 PageNotFoundComponent。 这是仪表板页面中的代码：

<div class="container-fluid">
    <header class="row spacing">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a routerLink="/summary" routerLinkActive="active">Summary</a></li>
                        <li><a routerLink="/detail" routerLinkActive="active">Summary</a>Detail</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</div>
<fr-dashboard *ngIf="hasLogin()"></fr-dashboard>
<router-outlet></router-outlet>

为了测试路由，我尝试执行以下操作：单击登录按钮时，页面应重定向到仪表板

登录按钮：

<button class="btn btn-primary" (click)="performSignIn()">Sign In</button>

导航：

performSignIn(){
        this._router.navigate(['/dashboard']);
    }

但是当点击操作执行时，我在浏览器中收到以下消息：

谁能告诉我这里有什么问题。我正在使用 angular2 版本：(2.0.0-rc.5)

Answer 1

如果您希望 summary 和 detail 成为 dashboard 的子路由，则需要将其定义为子路由：

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/signin',
        pathMatch: 'full'
    },
    {
        path: 'signin',
        component: SignInComponent
    },
    {
        path: 'signup',
        component: SignUpComponent,
    },
    {
        path: 'dashboard',
        component: DashboardComponent,
        children: [
            path: '',
            redirectTo: 'summary',
            pathMatch: 'full'
        },
        {
            path: 'summary',
            component: UsageInformationComponent
        },
        {
            path: 'detail',
            component: DetailedInformationComponent
        },
        ]
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

Answer 2

您似乎将“组件”拼错为“组件”。这可能是您的问题的根源。

这里出现：

{
    path: 'summary',
    component: UsageInformationComonent
},
{
    path: 'detail',
    component: DetailedInformationComonent
},

这里：

UsageInformationComonent,
DetailedInformationComonent,