如何在可重用（通用）模块中进行子路由？

Question

我有一个自定义人员模块，我想打包，然后在不同的应用程序中重用。

@Component({
  selector: 'mod-person-grid',
  template: `<h1><ng-content></ng-content></h1>`
})
class PersonGridComponent { @Input() type: string; }

const personRoutes: Routes = [
  { 
     path: '',   
     component: PersonGridComponent,
      children: [
      {
        path: 'view/:id', 
        component: PersonDetailsComponent,
       }
    ]
  }
];

@NgModule({
  imports:      [ CommonModule, RouterModule.forChild(personRoutes) ],
  declarations: [ PersonGridComponent, PersonDetailsComponent ],
  exports: [ PersonGridComponent ]
})
export class PersonModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: PersonModule,
      providers: [ PersonService ]
    }
  }
}

因此，我可以拥有一个使用人员组件的员工应用程序来查看员工，以及在选择特定员工查看其详细信息时。

或者我将有一个学生申请表，我使用同一个人模块查看所有“学生”类型的人，点击特定学生后，显示其详细信息。

但是，根据父应用程序（员工或学生）链接，我无法在网格和详细视图之间的此人员模块中使用路由。

这是一个展示我想做的东西：routing_in_module

我的EmployeeComponent使用“雇员”路线，StudentComponent使用“学生”路线。

@Component({
  template: `<mod-person-grid [type]="'staff'">Manage Employees</mod-person-grid>`
})
class EmployeesComponent { }

@Component({
  template: `<mod-person-grid [type]="'student'">Manage Students</mod-person-grid>`
})
class StudentsComponent { }

const appRoutes: Routes = [
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: 'home',  component: HomeComponent },
  { path: 'employees',  component: EmployeesComponent },
  { path: 'students',  component: StudentsComponent },
];

@NgModule({
  imports: [ BrowserModule, RouterModule.forRoot(appRoutes), PersonModule.forRoot() ],
  declarations: [ App, HomeComponent, EmployeesComponent, StudentsComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

目标是让PersonModule尽可能通用。

我如何路由到PersonModule中的子“视图”路径，具体取决于它来自哪个应用程序/组件/链接？

Answer 1

花了一段时间来解决问题所在。但最终设法让它按你的意愿工作。

如果我理解你，你需要EmployeesComponent和StudentsComponent都使用mod-person-grid组件（它本身有路由器插座），能够显示所选人员的详细信息。

Step 1

为了能够实现上述目标，也就是说，人的细节在mod-person-grid组件的路由器出口中呈现，Employees组件是Students和PersonsModule组件的基础路径的一部分，使这些组件需要知道任何要呈现的子路由。这些是

const appRoutes: Routes = [
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: 'home',  component: HomeComponent },
  { path: 'employees',  component: EmployeesComponent, loadChildren:'src/person.module.ts#PersonModule' },
  { path: 'students',  component: StudentsComponent, loadChildren:'src/person.module.ts#PersonModule' }
];

中定义的子路径，可以定义如下。

employees

上面基本上说，EmployeesComponent路线，将呈现mod-person-grid的内容（其中包含从PersonsModule获得的路由器出口），并且还具有子路线，这些路线是通过loadChildren中定义的路线获得的，必要时将延迟加载（通过PersonGridComponent实现）。

Step 2

当应用程序被加载时，它错误地也呈现了PersonsModule的内容（这打破了整体内容）。之所以发生这种情况，是因为您在导入应用程序模块时导入了主路由配置和

@NgModule({
  imports: [ ..., RouterModule.forRoot(appRoutes), PersonModule.forRoot() ]
})
export class AppModule {}

中定义的路由配置。

const appRoutes: Routes = [
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: 'home',  component: HomeComponent }
];

这造成了这两种配置之间的冲突：

路线1

const personRoutes: Routes = [
  { 
     path: '',   
     component: PersonGridComponent,
      children: [ ... ]
  }
];

和

路线2

''

这两个都表明空路径home应该呈现PersonsGridComponent路线，通过路线1中配置的重定向和路线2中配置的

const personRoutes: Routes = [
  { 
     path: '',   
     component: PersonGridComponent,
     children: [ ... ],
     outlet: 'person'
  }
];

实现。

解决此问题的方法是将路线2的配置映射到指定的插座，如下所示

PersonsGridComponent

和 <td><a [routerLink]="[{ outlets: { person: ['view', person.id]} }]">view</a></td> 处理重定向的部分，像这样工作

here

阅读更多关于命名出口PersonsModule。

Step 3

最后一个修复涉及PersonGridComponent中的错误配置。在你的routerLink中view/{id}的重定向定义，指定链接必须是view ...但是在你的路由定义中，你将你的路线的PersonGridComponent部分绑定到

const personRoutes: Routes = [
  { 
     path: '', component: PersonGridComponent, // <- This here
     ...
  }
];

。

PersonDetailsComponent

然后会破坏渲染。这不是你需要的，而是你需要通过

const personRoutes: Routes = [
  { 
     path: 'view/:id',
     component: PersonDetailsComponent
     outlet: 'person'
  }
];

显示这个人的细节。路线更新如下

here

Plunker

我已经分叉了你的问题，并解决了你的问题。你可以看到完整的工作解决方案qazxswpoi。