Angular 角度2:覆盖路由器导航方法
我想覆盖Router::导航并直接在Router类中执行一些代码(例如log) 我错过什么了吗?我可以用路由器组件覆盖工厂吗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
为什么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 { }