Angular 2 RC5子路由问题

前端之家收集整理的这篇文章主要介绍了Angular 2 RC5子路由问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图让子路由工作,这是我得到的错误

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'settings'

这是我的app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { routeComponents,routing,appRoutingProviders } from './app.routes';


@NgModule({
    declarations: [
        AppComponent,routeComponents
    ],imports: [
        BrowserModule,CommonModule,FormsModule,routing
    ],providers: [ appRoutingProviders ],entryComponents: [AppComponent],bootstrap: [AppComponent]
})
export class AppModule {

}

这是我的app.routes.ts

import { Routes,RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/';
import { settingsRoutes,settingsComponents } from './settings/';

const appRoutes: Routes = [
    { path: '',redirectTo: 'dashboard',pathMatch: 'full'},{ path: 'dashboard',component: DashboardComponent },...settingsRoutes
];

export const appRoutingProviders: any[] = [

];

export const routeComponents: any[] = [
    DashboardComponent,...settingsComponents
];

export const routing = RouterModule.forRoot(appRoutes,{useHash: true});

这是我的settings.routes.ts

import { Routes } from '@angular/router';
import { SettingsComponent } from "./settings.component";
import { DashboardSettingsComponent } from "./dashboard-settings/dashboard-settings.component";

export const settingsRoutes: Routes = [
    {
        path: 'settings',component: SettingsComponent,children: [
            { path: 'dashboard-settings',component: DashboardSettingsComponent }
        ]
    }
];

export const travelSettingsComponents = [
    SettingsComponent,DashboardSettingsComponent
];

**如果我从settings.routes.ts文件删除此行,则没有错误,它允许我转到设置路径:

{ path: 'dashboard-settings',component: DashboardSettingsComponent }

解决方法

如果你有一个带孩子的路线,我相信你需要指定一个默认的子路径,如下所示:

children: [
    { path: '',component: SettingsComponent },{ path: 'dashboard-settings',component: DashboardSettingsComponent }
]

这将生成以下URL:/ settings和/ settings / dashboard-settings

猜你在找的Angularjs相关文章