修改抽象服务契约后，如何通过路由向组件服务传递查询参数？

背景 #

• 存在两个带不同查询参数的路由，指向同一组件：
  • 默认路由：''，携带查询参数id1
  • 备用路由：'alternate'，携带查询参数id1、id2、id3
• 组件通过依赖注入获取数据服务，服务实例由路由注入，原服务抽象类通过getData方法接收查询参数获取数据。

原有路由配置：

export const MY_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./common.component').then((mod) => mod.CommonComponent),
    providers: [{ provide: AbstractService, useClass: Service1 }],
  },
  {
    path: 'alternate',
    loadComponent: () =>
      import('./common.component').then((mod) => mod.CommonComponent),
    providers: [{ provide: AbstractService, useClass: Service2 }],
  },
];

原抽象类定义：

export abstract class AbstractService {  
  abstract getData(
    args: Partial<{ id1: string; id2: string; id3: string }>
  ): Observable<TheData[]>;
}

现在希望将抽象类契约修改为直接暴露Observable：

export abstract class AbstractService {  
  abstract data$: Observable<TheData[]>;
}

问题 #

修改契约后，如何向Service1和Service2传递查询参数？能否通过为服务添加构造函数参数，并在路由层面使用useFactory生成对应服务来解决？

解决方案 #

完全可以通过useFactory结合路由参数注入来解决，同时还能让服务响应查询参数的动态变化，具体步骤如下：

1. 修改服务实现，通过构造函数接收路由实例 #

让Service1和Service2在构造函数中注入ActivatedRoute，直接监听查询参数变化并生成data$：

// Service1.ts
export class Service1 extends AbstractService {
  data$: Observable<TheData[]>;

  constructor(private route: ActivatedRoute) {
    super();
    // 监听查询参数变化，自动更新数据
    this.data$ = this.route.queryParams.pipe(
      map(params => {
        // 这里替换为实际的数据获取逻辑（如HTTP请求）
        return mockDataSource.filter(item => item.id1 === params.id1);
      })
    );
  }
}

// Service2.ts
export class Service2 extends AbstractService {
  data$: Observable<TheData[]>;

  constructor(private route: ActivatedRoute) {
    super();
    this.data$ = this.route.queryParams.pipe(
      map(params => {
        // 使用多参数过滤或请求数据
        return mockDataSource.filter(item => 
          item.id1 === params.id1 && 
          item.id2 === params.id2 && 
          item.id3 === params.id3
        );
      })
    );
  }
}

2. 路由配置中使用useFactory创建服务实例 #

在路由的providers配置里，用useFactory替代useClass，注入ActivatedRoute并传递给服务构造函数：

export const MY_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./common.component').then((mod) => mod.CommonComponent),
    providers: [
      {
        provide: AbstractService,
        useFactory: (route: ActivatedRoute) => new Service1(route),
        // 声明依赖的注入令牌
        deps: [ActivatedRoute]
      }
    ]
  },
  {
    path: 'alternate',
    loadComponent: () =>
      import('./common.component').then((mod) => mod.CommonComponent),
    providers: [
      {
        provide: AbstractService,
        useFactory: (route: ActivatedRoute) => new Service2(route),
        deps: [ActivatedRoute]
      }
    ]
  }
];

3. 组件中直接使用服务的data$ #

组件无需手动传递参数，直接注入AbstractService后，通过async管道订阅data$即可：

// common.component.ts
@Component({
  selector: 'app-common',
  template: `
    <div *ngIf="service.data$ | async as data">
      <ul>
        <li *ngFor="let item of data">{{item.name}}</li>
      </ul>
    </div>
  `
})
export class CommonComponent {
  constructor(public service: AbstractService) {}
}

方案优势 #

• 自动响应查询参数变化：通过route.queryParams的Observable，查询参数更新时data$会自动推送新数据
• 符合依赖注入原则：服务通过DI获取路由实例，无需组件手动传递参数
• 路由与服务解耦：路由仅负责提供服务实例，数据逻辑完全封装在服务内部

内容的提问来源于stack exchange，提问作者Fred2020