Angular2 在启动时重定向到路由

Question

我正在使用 @ngrx/store 和 observables。我有一个 user reducer，它设置有关用户的信息，包括用户的 JWT。

A NavigationService 被注入到订阅 user 模型的根 AppComponent 中，并将根据用户令牌的存在进行路由。 UserService 读取本地存储并将结果分派给 user reducer。

问题是，当我尝试使用 goToLogin() 路由到主页时，出现以下错误...没有提供太多信息。

我猜路由组件还没有设置好。有没有办法在路由之前等待应用程序加载？或者下面的错误是否表示不同的问题？

@Injectable()
export class NavigationService {
  private subscription: any;

  constructor(public router:Router, private userService: UserService) {
    this.subscription = this.userService.token$.subscribe(token => {
       if (token) {
         this.goToSecretStuff();
       } else {
         this.goToLogin();
       }
    });
  }


TypeError: Cannot read property 'constructor' of undefined
    at Object.implementsOnDestroy (pipe_lifecycle_reflector.ts:2)
    at Function.ChangeDetectionUtil.callPipeOnDestroy (change_detection_util.ts:209)
    at AbstractChangeDetector.ChangeDetector_CohortList_0.dehydrateDirectives (viewFactory_CohortList:91)
    at AbstractChangeDetector.dehydrate (abstract_change_detector.ts:177)
    at AbstractChangeDetector.destroyRecursive (abstract_change_detector.ts:200)
    at AbstractChangeDetector.destroyRecursive (abstract_change_detector.ts:207)
    at AbstractChangeDetector.destroyRecursive (abstract_change_detector.ts:207)
    at AppView.destroy (view.ts:159)
    at AppViewManager_.destroyViewInContainer (view_manager.ts:286)
    at ViewContainerRef_.remove (view_container_ref.ts:166)
    at ComponentRef_.dispose [as _dispose] (dynamic_component_loader.ts:283)
    at ComponentRef_.dispose (dynamic_component_loader.ts:87)
    at router_outlet.ts:108
    at e.run (zone-microtask.min.js:8)
    at e.run (ng_zone.ts:371)
    at zone-microtask.min.js:8
    at z (zone-microtask.min.js:8)
    at A (zone-microtask.min.js:8)
    at zone-microtask.min.js:8
    at zone-microtask.min.js:1
    at microtask (ng_zone.ts:410)
    at e.run (zone-microtask.min.js:8)
    at e.run (ng_zone.ts:371)
    at zone-microtask.min.js:8
    at MutationObserver.h (zone-microtask.min.js:8)

Answer 1

像这样的接缝是一个已知错误 #5169, #6425，正如@nathasm 在评论中提到的那样。

解决方法是从路由组件的模板中删除 async 管道 if/when 它抛出错误：

TypeError: Cannot read property 'constructor' of undefined

更新：

我一直在研究这个问题，但找不到任何方法来避免管道错误；（甚至尝试创建我自己的 |asynx 管道。我发现解决这个问题的最佳方法（并且用最少的更改）是在 constructor() 中订阅并在 routerOnActivate()

中触发更改检测

  constructor(public store: Store<any>, private _cdref: ChangeDetectorRef) {
    // this.items$ = this.store.select('items');
    this.store.select('items')
      .subscribe(items => this.items = items);
  }
  routerOnActivate(next, prev) {
    this._cdref.markForCheck();
  }

在我的具体情况下，我可以摆脱大部分样板，因为我的路由组件扩展了基础 class，它已经做了一些事情 onActivate():

export class ItemListRoute extends _BaseRoute {
  public items: any;
  constructor(public store: Store<any>) {
    super(store);
    this.store.select('items')
      .subscribe(items => this.items = items);
  }
}

Angular2 在启动时重定向到路由

Angular2 Redirect to route on startup

angular

angular2-routing

ngrx

更新：