Angular6 – 未加载空路径的子路由

前端之家收集整理的这篇文章主要介绍了Angular6 – 未加载空路径的子路由前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在将我的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>

编辑:请注意,我不想在/ home url部分后显示任何内容.

解决方法

因为它的相对路径.尝试以下应该工作.

children: [
      { path: '',redirectTo: '/home/content' },{ path: 'content ',{ path: '**',redirectTo: 'home' }
    ]

猜你在找的Angularjs相关文章