Question

我正在尝试从一个模块中获取包含来自另一个模块的组件的路由。我试图实现的方案是：/group/feature，它应该显示feature.html中包含在group.html内容中的内容。我可以/group开始工作，但/group/feature会返回page not found。

完整项目可在此处获取：https://stackblitz.com/edit/angular-nsfgyr

以下是主要文件：

feature.module.ts：

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

基module.ts

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

基routing.module.ts：

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

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

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 {
}

Answer 1

您已为'group'定义了路线。您尚未定义路线'group/feature'。

更新

您的组路由看起来像是到/ group的普通路由，但是group实际上是一个子模块，并且您没有加载组件loadChildren。

const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: 'group'},
    {path: 'group', loadChildren: 'app/group/group.module#GroupModule},
    {path: '**', component: PageNotFoundComponent}
  ]
;

Answer 2

第一种方式。没有孩子，没有进口模块。

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 {
}

第二种方式是使用儿童..

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

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

"<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只有

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

FeatureHomeComponent.html

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

在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 {
}

我为苹果品牌所做的一切＆＃39;是在我的AppRoutingModule中导入AppleRoutingModule。请参阅链接。Angular 4 route selection for category/subcategory or category/item for ecommerce web site

Answer 3

我明白了：在组路由器的children数组中添加功能路径：

在group-routing.module.ts中：

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

感谢您的所有回复和帮助！

如何路由到功能模块

3 个答案: