代码之家 › 专栏 › 技术社区 › Sebastian Edelmeier

检索并响应FactoryProvider中的路由参数

angular-routing angular

Sebastian Edelmeier · 技术社区 · 5 年前

我想用一个 工厂供应商 它根据当前的URI选择服务实现。

此外,其中一个实现需要对路由参数作出反应(定义如下 route/:parameter )

如下图所示,我订阅的更改很不幸,我无法以这种方式访问参数。在主路由器出口中实例化的组件可以访问它们,但FactoryProvider不能。

有什么我可能错过的吗?

模块代码(为提高可读性而缩写)

@NgModule({
  declarations: [],
  imports: [],
  exports: [],
  providers: [XServiceProvider],
  entryComponents: []})

工厂供应商

export const XServiceProvider = {
    provide: XService,
    useFactory: XServiceFactory,
    deps: [Http, HttpService, ConfigurationService, DatePipe, Router, ActivatedRoute]
  };

const XServiceFactory = (http: Http,
                               httpService: HttpService,
                               configuration: ConfigurationService,
                               datePipe: DatePipe,
                               router: Router,
                               activatedRoute: ActivatedRoute) => {

   const useAlternateImpplementation= router.url.startsWith('/mg/');


if (useAlternateImpplementation === true) {
    const service = new XyService(http, httpService, configuration, datePipe);

for (const child of activatedRoute.root.children) {
        if (child.outlet === PRIMARY_OUTLET) {
            child.url.subscribe(params => {
                 service.setParam(params[parameter]);
             });
        }
    }
    return service;
  }
  return new XService(http, httpService, configuration, datePipe);
};

1 回复 | 直到 5 年前

Sebastian Edelmeier 5 年前

通过将依赖注入范围从单例更改为瞬态,解决了这个问题。

以下是如何:

从模块中删除提供程序定义
将它添加到实际需要它的组件中

代码示例:

@NgModule({
    declarations: [],
    exports: [],
    providers: [ /* remove here! */ ]
})
//...

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  providers: [XServiceProvider] /* add here */
})
//...

原因(可能)如下:

声明为模块范围提供程序的服务在每次创建应用程序时创建一次。因此,您不能加载应用程序、使用服务实现1、更改上下文、使用实现2。
按组件声明提供程序会更改此模式。根据路由,组件被实例化并销毁。也就是说,另一条路径现在可以导致另一个实现。

我的灵感来自 blog post 试试这个。

不过,我不知道如何访问路由参数,这些参数超出了A渲染到主出口的组件的范围。