如何路由到功能模块 [英] How to Route to Feature Module

问题描述

我正在尝试使来自一个模块的路由包括来自另一个模块的组件.我正在尝试实现的方案是:/group/feature，它应该显示出feature.html中的内容，该内容包含在路由器出口所在的group.html内容中.我可以使/group工作，但是/group/feature返回page not found.

I'm trying to have a route from one module include a component from another module. The scheme I'm trying to implement is: /group/feature which should show the content in feature.html included in the content of group.html where the router-outlet is. I can get /group to work, but /group/feature returns page not found.

完整的项目位于此处: https://stackblitz.com/edit/angular-nsfgyr

The full project is available here: https://stackblitz.com/edit/angular-nsfgyr

以下是主要文件:

feature.module.ts:

feature.module.ts:

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [FeatureComponent],
  exports: [FeatureComponent]
})
export class FeatureModule {
}

group-module.ts

group-module.ts

@NgModule({
  imports: [
    CommonModule,
    FeatureModule,
    GroupRoutingModule,
  ],
  declarations: [
    GroupComponent,
  ],
  exports: [GroupComponent]
})
export class GroupModule {
}

group-routing.module.ts:

group-routing.module.ts:

const ingestRoutes: Routes = [
  {path: 'feature', component: FeatureComponent}
];

@NgModule({
  imports: [
    RouterModule.forChild(ingestRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class GroupRoutingModule {
}

app-routing.module:

app-routing.module:

const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: 'group'},
    {path: 'group', component: GroupComponent},
    {path: '**', component: PageNotFoundComponent}
  ]
;

@NgModule({
  imports: [
    RouterModule.forRoot(
      routes,
      {enableTracing: false, useHash: false}
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

推荐答案

第一种方法.没有孩子，没有导入模块.

The first way. No children, no modules imported.

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'group'},
  {path: 'group/feature', component: FeatureComponent },
  {path: 'group', component: GroupComponent},
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [
  RouterModule.forRoot(routes,
  {enableTracing: false, useHash: false}
  )
],
exports: [
  RouterModule
]
})
export class AppRoutingModule {
}

第二种方法是使用孩子.

The second way is to use children..

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'group'},
  {path: 'group', component: GroupComponent,
   children: [
    { path: 'feature', component: FeatureComponent }]     
  },
  {path: '**', component: PageNotFoundComponent}
];

第三种方法是导入模块.它有自己的

The third way is to import the module. It has its own

"<router-outlet></router-outlet>".

const ingestRoutes: Routes = [
  { path: 'group/feature', component: FeatureComponent,
    children: [       
      path: 'more', component: MoreComponent, // if you want to add..
        // this will route to group/feature/more
      path: '', component: FeatureHomeComponent,
    ] 
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(ingestRoutes)
  ],
  declarations: [
      FeatureComponent, FeatureHomeComponent, MoreComponent
  ],
  exports: [
    RouterModule
  ]
})
export class GroupRoutingModule {
}

FeatureComponent.html仅具有

The FeatureComponent.html has only

<route-outlet></router-outlet>. 

FeatureHomeComponent.html

FeatureHomeComponent.html

- you can display anything here..YOUR ACTURE FEATURE COMPONENT.HTML

在AppRoutingModule中将其导出.

Export this in AppRoutingModule.

 const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: 'group'},
    {path: 'group', component: GroupComponent},
    {path: '**', component: PageNotFoundComponent}
  ];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {enableTracing: false, useHash: 
    false}), GroupRoutingModule, // add this..
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

我为苹果品牌"所做的只是在我的AppRoutingModule中导入AppleRoutingModule.请参阅链接.针对电子商务网站的类别/子类别或类别/项目

All I do for 'apple brand' is to just import AppleRoutingModule in my AppRoutingModule. See link.Angular 4 route selection for category/subcategory or category/item for ecommerce web site

这篇关于如何路由到功能模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！