我正在将我的Angular 4应用程序转换为Angular 6.但是,我在进行与路由相关的更改时遇到了问题.
现在,当我运行我的应用程序时,Home组件已加载,但未加载具有空路径的子组件ContentsComponent.
我的应用程序中的路由定义如下:
app.routing.module.ts
const routes: Routes = [ { path: '',redirectTo: '/home',pathMatch: 'full' },{ path: 'home',component: HomeComponent },{ path: 'support',component: SupportComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)],exports: [RouterModule] }) export class AppRoutingModule { }
home.routing.module.ts
const routes: Routes = [ { path: 'home',component: HomeComponent,children: [ { path: '',component: ContentsComponent },//<-- This component is not loaded { path: '**',redirectTo: 'home' } ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)],exports: [RouterModule] }) export class HomeRoutingModule { }
home.module.ts
@NgModule({ imports: [ HomeRoutingModule ],exports: [],declarations: [ HomeComponent,ContentsComponent ],providers: [],}) export class HomeModule { }
app.module.ts
@NgModule({ imports: [ BrowserModule,AppRoutingModule,ReactiveFormsModule,HomeModule ],declarations: [AppComponent],bootstrap: [AppComponent],providers: [ { provide: LocationStrategy,useClass: HashLocationStrategy } ] }) export class AppModule { }
home.component.html
<router-outlet></router-outlet>
解决方法
因为它的相对路径.尝试以下应该工作.
children: [ { path: '',redirectTo: '/home/content' },{ path: 'content ',{ path: '**',redirectTo: 'home' } ]