Angular 角度2:覆盖路由器导航方法

Angular 角度2:覆盖路由器导航方法,angular,angular2-routing,Angular,Angular2 Routing,我想覆盖Router::导航并直接在Router类中执行一些代码(例如log) 我错过什么了吗?我可以用路由器组件覆盖工厂吗 为什么angular无法注入我的路由?我使用以下代码(angular v6.0.3)成功覆盖了默认的angular Router.navigate功能: 导出类MyRouter扩展路由器{ 构造函数(rootComponentType:Type,urlSerializer:urlSerializer, rootContexts:ChildrenOutletContexts

我想覆盖Router::导航并直接在Router类中执行一些代码(例如log)

我错过什么了吗?我可以用路由器组件覆盖工厂吗


为什么angular无法注入我的路由?

我使用以下代码(angular v6.0.3)成功覆盖了默认的angular Router.navigate功能:

导出类MyRouter扩展路由器{
构造函数(rootComponentType:Type,urlSerializer:urlSerializer,
rootContexts:ChildrenOutletContexts,位置:位置,注入器:注入器,
加载程序:NgModuleFactoryLoader,编译器:编译器,配置:路由){
超级(rootComponentType、urlSerializer、rootContext、位置、注入器、装入器、编译器、配置);
}
导航(命令:any[],附加:NavigationExtras={skipLocationChange:false}):承诺{
...
返回super.navigate(命令、附加);
}
}
函数展平(arr:T[]):T[]{
返回Array.prototype.concat.apply([],arr);
}
导出函数routerFactory(rootComponentType:Type,urlSerializer:urlSerializer,
rootContexts:ChildrenOutletContexts,位置:位置,注入器:注入器,
加载器:NgModuleFactoryLoader,编译器:编译器,配置:路由[]]:路由器{
返回新的MyRouter(
根组件类型,
urlSerializer,
根上下文,
位置,
注射器,
装载机,
编译程序,
展平(配置)
);
}
@NGD模块({
声明:[
应用组件
],
进口:[
RouterModule.forRoot([]),
...
],
供应商:[
{
提供:路由器,
useFactory:routerFactory,
deps:[ApplicationRef,UrlSerializer,ChildrenOutletContext,位置,注入器,
NgModuleFactoryLoader,编译器,路由]
},
...
],
引导:[AppComponent]
})
导出类AppModule{}

可以考虑使用路由事件。如果你愿意考虑这个选项,我可以粘贴一些示例代码。如果我不能用工厂覆盖路由器,我将使用这个.Router.events.subscribe(event=>{});但现在,我更喜欢尝试用这种方式覆盖路由器。我正在尝试完全相同的事情,但我也得到
无法解析routerFactory的所有参数。在angular 8.3上,您还需要将以下内容添加到模块的装饰器数组:
Location,{provide:LocationStrategy,useClass:PathLocationStrategy}
谢谢,它工作得很好!!!
export const routes: Routes = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];


export function routerFactory(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer,
                   rootContexts: ChildrenOutletContexts, location: Location,
                   injector: Injector, loader: NgModuleFactoryLoader,
                   compiler: Compiler, config: Router): Router {

  return new MyRouter(
      rootComponentType,
      urlSerializer,
      rootContexts,
      location,
      injector,
      loader,
      compiler,
      config
  );
}


@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    routing,
    ...
  ],
  providers: [
    ...
    {
      provide: Router,
      useFactory: routerFactory,
      deps: [Type, UrlSerializer, ChildrenOutletContexts, Location, Injector, 
             NgModuleFactoryLoader, Compiler, router]
    }
  ],
  bootstrap: [AppComponent]
})
Error: Can't resolve all parameters for routerFactory: (
[object Object], 
[object Object], 
[object Object], 
[object Object], 
[object Object], 
[object Object], 
[object Object], 
?)
export class MyRouter extends Router {
  constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer,
    rootContexts: ChildrenOutletContexts, location: Location, injector: Injector,
    loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes) {
    super(rootComponentType, urlSerializer, rootContexts, location, injector, loader, compiler, config);
  }
  navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean> {
    ...
    return super.navigate(commands, extras);
  }
}

function flatten<T>(arr: T[][]): T[] {
  return Array.prototype.concat.apply([], arr);
}

export function routerFactory(rootComponentType: Type<any>, urlSerializer: UrlSerializer,
  rootContexts: ChildrenOutletContexts, location: Location, injector: Injector,
  loader: NgModuleFactoryLoader, compiler: Compiler, config: Route[][]): Router {
  return new MyRouter(
    rootComponentType,
    urlSerializer,
    rootContexts,
    location,
    injector,
    loader,
    compiler,
    flatten(config)
  );
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([]),
    ...
  ],
  providers: [
    {
      provide: Router,
      useFactory: routerFactory,
      deps: [ApplicationRef, UrlSerializer, ChildrenOutletContexts, Location, Injector,
        NgModuleFactoryLoader, Compiler, ROUTES]
    },
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }