我为自己的特定目的实现了一个RouteConfigBuilder,用自定义变量清除了路由声明。
route-builder.type.ts
export class RouteBuilder {
private routeConfigBuilders: RouteConfigBuilder[] = [];
private currentRouteConfig: RouteConfigBuilder;
public add(routeConfigBuilder: IRouteConfigBuilder): RouteBuilder {
this.routeConfigBuilders.push(RouteConfigBuilder.get(routeConfigBuilder));
return this;
}
public build(): Routes {
const routes: Routes = [];
let routeConfig: IRouteConfig;
for (const routeConfigBuilder of this.routeConfigBuilders) {
routeConfig = routeConfigBuilder.build();
routes.push(this.routeConfigToRoute(routeConfig));
}
return routes;
}
private routeConfigToRoute(routeConfig: IRouteConfig): Route {
const route: Route = {};
for (const prop in routeConfig) {
if (routeConfig[prop]
|| ((typeof routeConfig[prop] === 'string')
&& (routeConfig[prop] === ''))
) {
if ((prop === 'loadChildren')
&& !((typeof routeConfig[prop] === 'string'))
) {
route[prop] = () => routeConfig[prop];
} else if (prop === 'addChildrenCallback') {
route['children'] = routeConfig[prop]().build();
} else {
route[prop] = routeConfig[prop];
}
}
}
return route;
}
}在我的路由模块声明中:
export function appRoutes() {
return new RouteBuilder()
// always first
.add({
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
})
.add({
path: '',
loadChildren: AuthModule
})
.add({
path: '',
loadChildren: FeaturesModule,
canActivate: [AuthGuard]
})
// always last
.add({
path: '**',
component: PageNotFoundComponent
})
.build();
}
@NgModule({
imports: [
RouterModule.forRoot(appRoutes())
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }当我运行ng build时,返回:
我的声明在其他模块中是相同的,但只有在app-routing.module.ts和auth-routing.module.ts中才会发生这种情况。如果我删除我的RouteConfigBuilder实例,它可以完美地工作。
我尝试了很多方法来修改我实例化RouteConfigBuilder的方式,直到现在还没有任何方法对我有帮助。
如何在路由中实例化我的对象,并且不再显示错误?
非常感谢。
*添加实现路由-config.type.ts
import { Type } from '@angular/core';
interface IRouteInfo {
title: string;
withoutNavigate?: boolean;
}
interface IRouteData {
info: IRouteInfo;
}
export interface IRouteConfig {
path: string;
component?: Type<any>;
loadChildren?: Type<any>;
data?: IRouteData;
addChildrenCallback?: Function;
redirectTo?: string;
pathMatch?: string;
canActivate?: any[];
}
export interface IRouteConfigBuilder {
path: string;
component?: Type<any>;
loadChildren?: any;
title?: string;
withoutNavigate?: boolean;
addChildrenCallback?: Function;
redirectTo?: string;
pathMatch?: string;
canActivate?: any[];
}
export class RouteConfigBuilder {
private routeConfigBuilder: IRouteConfigBuilder;
public static get(routeConfigBuilder: IRouteConfigBuilder) {
return new RouteConfigBuilder(routeConfigBuilder);
}
constructor(routeConfigBuilder: IRouteConfigBuilder) {
this.routeConfigBuilder = routeConfigBuilder;
}
public build(): IRouteConfig {
const routeConfig: IRouteConfig = {
path: this.routeConfigBuilder.path,
component: this.routeConfigBuilder.component,
loadChildren: this.routeConfigBuilder.loadChildren,
addChildrenCallback: this.routeConfigBuilder.addChildrenCallback,
redirectTo: this.routeConfigBuilder.redirectTo,
pathMatch: this.routeConfigBuilder.pathMatch,
canActivate: this.routeConfigBuilder.canActivate
};
if (this.canBuildData()) {
routeConfig.data = {
info: {
title: this.routeConfigBuilder.title,
withoutNavigate: this.routeConfigBuilder.withoutNavigate
}
};
}
return routeConfig;
}
private canBuildData(): boolean {
return (this.routeConfigBuilder.title || this.routeConfigBuilder.withoutNavigate) ? true : false;
}
}发布于 2017-04-18 03:20:09
不确定您的模块在为RouteConfigBuilder和IRouteConfigBuilder注册提供程序时是什么样子,
下面是应该工作的实现,
...
export class SomeModule{
....
static forRoot(routeConfig): ModuleWithProviders {
return {
ngModule: SomeModule,
providers: [
{ provide: IRouteConfigBuilder, useValue: routeConfig },
RouteConfigBuilder
],
};
}
.....
}希望这能有所帮助!!
https://stackoverflow.com/questions/43331178
复制相似问题