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

发布时间：2020-12-17 18:07:07 所属栏目：安全来源：网络整理

导读：我正在将我的Angular 4应用程序转换为Angular 6.但是,我在进行与路由相关的更改时遇到了问题. 现在,当我运行我的应用程序时,Home组件已加载,但未加载具有空路径的子组件ContentsComponent. 我的应用程序中的路由定义如下： app.routing.module.ts const rout

我正在将我的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' }
    ]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!