对不同的输出使用相同的组件

Question

在我的应用程序中,我喜欢为医生创建一个主人(CRUD).我有一个医生组件,用于创建,编辑和列出.用于查看它的单独组件.我想像URL一样

physician/create

physician/list

physician/edit/3

所以我创建了带孩子的路线

const routes: Routes = [
  {
    path: 'physician',
    children: [
      { path: 'list', component: PhysicianComponent },
      { path: 'create', component: PhysicianComponent },
      { path: 'update/:id', component: PhysicianComponent },
      { path: 'view/:id', component: PhysicianViewComponent }
    ]
  }

对于create,update和list,我想使用相同的组件,但使用组件类中的一些条件来使用不同的输出

Answer 1

是的,你使用ActivatedRoute服务,并检查路线参数和路由器网址,以检查要应用的条件,但很难想象你只需更改网址或更改参数名称,以便yopu需要在组件另一个更改方法是向每个路由添加数据属性,例如标志和基于该标志的特定条件

const routes: Routes = [
  {
    path: 'physician',
    children: [
      { path: 'list', component: PhysicianComponent ,data :{kind : 'list'}},
      { path: 'create', component: PhysicianComponent ,data:{kind 'create'} },
      { path: 'update/:id', component: PhysicianComponent , data : { kind : 'update'} },
      { path: 'view/:id', component: PhysicianViewComponent , date : {kind :'view'} }
    ]
  }

零件:

ngOnInit() {
 this.activeRoutedService.data.subscribe(data=> {
   switch (data.kind) {
     ....
   }
}