我正在为cms系统编写一个角度前端。页面通过api公开。我想将路由添加到我的前端，但是在路由器尝试解决这些路由之前我遇到了问题。
我现在已经达到了添加通配路线的程度＆＃39; **＆＃39;到始终命中的routerModule。这会加载一个名为PageNavigateComponent的组件，该组件具有一个解析器。在这个解析器中，我确保将来自cms api的所有路由添加到router.config中。我使用unshift，以便在通配符路由之前添加新路由。然后在pageNavigateComponent的构造函数中，我尝试重定向到用户键入的url。
this.router.navigate([this.currentUrl]);
然而，当我这样做时，没有任何事情发生。
如果我在routerModule中对此路由进行硬编码而不是动态添加，则重定向会起作用。所以我认为这与动态添加路由有关。但是，如果我在导航调用之前记录router.config，那么无论是动态添加路由还是硬编码，它看起来都是一样的。
我做错了什么？或者我是以完全错误的方式解决问题？
编辑1：这是一些代码：
来自app.routing.ts的：
export const routes = [
{
path: '**',
component: PageNavigateComponent,
resolve: { loaded: PageNavigateResolver }
}
];
：
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
RouterModule.forRoot(routes)
]
这是page.navigate解析器：
@Injectable()
export class PageNavigateResolver implements Resolve<any> {
constructor (private store: Store<fromRoot.State>, private router: Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
console.log('resolving for page navigate');
return this.store.select(fromRoot.getRouteLoaded)
.filter(isLoaded => isLoaded === true)
.first();
}
}
这是将路由加载到router.config：
的代码@Injectable()
export class RoutingEffects {
constructor(private actions$: Actions
, private apiService: ApiPageService
, private router: Router) { }
/**
* This effect makes use of the `startWith` operator to trigger
* the effect immediately on startup.
*/
@Effect()
loadRoutes$: Observable<Action> = this.actions$
.startWith(new route.LoadRoutesAction())
.debounceTime(500)
.switchMap(() => this.apiService.getRoutes())
.take(1)
.map(routes => {
for (let route of routes) {
let myRoute = route as Route;
console.log('route from DB is ', myRoute.Path, myRoute.Type);
this.router.config.unshift({
path: myRoute.Path,
component: mapper.getComponent(myRoute.Type),
data: [{secure: myRoute.Secure}],
resolve: { loaded: resolvers.getResolver(myRoute.Type) }
});
}
return new route.LoadRoutesSuccessAction(<Route[]>routes);
})
}
这是PageNavigateComponent：
@Component({
moduleId: module.id,
selector: 'lac-page-navigate',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<p>page navigate is Loading... {{currentUrl}}</p>'
})
export class PageNavigateComponent {
currentUrl: string = '';
constructor(store: Store<fromRoot.State>, route: ActivatedRoute, private router: Router) {
console.log('hello from page-navigate');
this.currentUrl = '/' + route.snapshot.url.join('/');
console.log('snapshot url is: ', this.currentUrl);
this.router.navigate([this.currentUrl]);
}
}
编辑2：这是console.trace，
console.trace(this.router.navigate([this.currentUrl]));
PageNavigateComponent @ page-navigate.ts:34
createClass @ core.es5.js:10788
createDirectiveInstance @ core.es5.js:10621
createViewNodes @ core.es5.js:11971
createRootView @ core.es5.js:11876
callWithDebugContext @ core.es5.js:13007
debugCreateRootView @ core.es5.js:12468
ComponentFactory_.create @ core.es5.js:9812
ComponentFactoryBoundToModule.create @ core.es5.js:3427
ViewContainerRef_.createComponent @ core.es5.js:10012
RouterOutlet.activateWith @ router.es5.js:5345
ActivateRoutes.placeComponentIntoOutlet @ router.es5.js:4527
ActivateRoutes.activateRoutes @ router.es5.js:4508
(anonymous) @ router.es5.js:4444
ActivateRoutes.activateChildRoutes @ router.es5.js:4444
ActivateRoutes.activate @ router.es5.js:4418
(anonymous) @ router.es5.js:4035
(anonymous) @ Observable.js:96
SafeSubscriber.__tryOrUnsub @ Subscriber.js:236
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
MergeMapSubscriber.notifyNext @ mergeMap.js:143
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
ScalarObservable._subscribe @ ScalarObservable.js:49
Observable._trySubscribe @ Observable.js:57
Observable.subscribe @ Observable.js:45
MapOperator.call @ map.js:54
Observable.subscribe @ Observable.js:42
subscribeToResult @ subscribeToResult.js:22
MergeMapSubscriber._innerSub @ mergeMap.js:130
MergeMapSubscriber._tryNext @ mergeMap.js:127
MergeMapSubscriber._next @ mergeMap.js:110
Subscriber.next @ Subscriber.js:89
MergeMapSubscriber.notifyNext @ mergeMap.js:143
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
ReduceSubscriber._complete @ reduce.js:119
Subscriber.complete @ Subscriber.js:114
MergeMapSubscriber.notifyComplete @ mergeMap.js:165
InnerSubscriber._complete @ InnerSubscriber.js:30
Subscriber.complete @ Subscriber.js:114
Subscriber._complete @ Subscriber.js:132
Subscriber.complete @ Subscriber.js:114
Subscriber._complete @ Subscriber.js:132
Subscriber.complete @ Subscriber.js:114
LastSubscriber._complete @ last.js:111
Subscriber.complete @ Subscriber.js:114
MergeAllSubscriber.notifyComplete @ mergeAll.js:105
InnerSubscriber._complete @ InnerSubscriber.js:30
Subscriber.complete @ Subscriber.js:114
Subscriber._complete @ Subscriber.js:132
Subscriber.complete @ Subscriber.js:114
FirstSubscriber._emitFinal @ first.js:136
FirstSubscriber._emit @ first.js:118
FirstSubscriber._next @ first.js:97
Subscriber.next @ Subscriber.js:89
FilterSubscriber._next @ filter.js:88
Subscriber.next @ Subscriber.js:89
DistinctUntilChangedSubscriber._next @ distinctUntilChanged.js:103
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
BehaviorSubject.next @ BehaviorSubject.js:44
(anonymous) @ state.js:26
SafeSubscriber.__tryOrUnsub @ Subscriber.js:236
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
ScanSubscriber._tryNext @ scan.js:115
ScanSubscriber._next @ scan.js:102
Subscriber.next @ Subscriber.js:89
WithLatestFromSubscriber._next @ withLatestFrom.js:113
Subscriber.next @ Subscriber.js:89
Notification.observe @ Notification.js:32
ObserveOnSubscriber.dispatch @ observeOn.js:50
AsyncAction._execute @ AsyncAction.js:111
QueueAction.execute @ QueueAction.js:33
AsyncScheduler.flush @ AsyncScheduler.js:36
QueueAction.schedule @ QueueAction.js:27
Scheduler.schedule @ Scheduler.js:43
ObserveOnSubscriber.scheduleMessage @ observeOn.js:54
ObserveOnSubscriber._next @ observeOn.js:57
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
BehaviorSubject.next @ BehaviorSubject.js:44
Store.next @ store.js:35
SafeSubscriber.__tryOrUnsub @ Subscriber.js:236
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
OuterSubscriber.notifyNext @ OuterSubscriber.js:19
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
DoSubscriber._next @ do.js:88
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
TakeSubscriber._next @ take.js:80
Subscriber.next @ Subscriber.js:89
SwitchMapSubscriber.notifyNext @ switchMap.js:124
InnerSubscriber._next @ InnerSubscriber.js:23
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
onLoad @ http.es5.js:1205
ZoneDelegate.invokeTask @ zone.js:414
onInvokeTask @ core.es5.js:4116
ZoneDelegate.invokeTask @ zone.js:413
Zone.runTask @ zone.js:181
ZoneTask.invoke @ zone.js:476