我试图让子路由工作,这是我得到的错误:
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