Angular2路由器在应用程序初始加载时不工作

自从我升级到angular的最新路由器（3.0.0-beta.2）后，我遇到了一个奇怪的问题

如果我执行这个代码

this._router.navigate(['/login']);

在我的应用程序中的任何地方，它都可以正常工作，除了用户第一次导航到页面，并且需要重定向才能登录。 没有抛出错误，只是没有重定向

这是我的密码：

main.ts文件：

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS, HTTP_PROVIDERS, ApplicationConfiguration, provide(Http, {
  useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router, appConfig: ApplicationConfiguration) => new HttpServiceLayer(xhrBackend, requestOptions, router, appConfig),
  deps: [XHRBackend, RequestOptions, Router, ApplicationConfiguration]
})]);

app.component.ts：

export class AppComponent {
constructor(private appConfig: ApplicationConfiguration,  private _router: Router) {
if (!this.appConfig.isUserLoggedIn()) {
      this._router.navigate(['/login']);
    }
 }
}

export const routes: RouterConfig = [
  { path: 'login', component: LogInComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

这可能是因为我没有做正确的事情，但这段代码在更新之前就已经正常工作了

有人知道路由器为什么不将用户重定向到登录页面吗

感谢您的帮助

解决方案： 在仪表板路线上使用警卫应该可以做到这一点

export class AppComponent {
  constructor() {}
}

export const routes: RouterConfig = [
  { path: 'login', component: LogInComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [DashboardGuard]},
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

@Injectable()
export class DashboardGuard implements CanActivate {
  constructor(private appConfig: ApplicationConfiguration, private _router: Router) {}

  canActivate() {
    if (this.appConfig.isUserLoggedIn()) { return true; }
    this._router.navigate(['/login']);
    return false;
  }
}

---

在main.ts中，您需要将DashboardGuard添加为提供程序。

在仪表板路由上使用一个防护装置应该可以做到这一点

export class AppComponent {
  constructor() {}
}

export const routes: RouterConfig = [
  { path: 'login', component: LogInComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [DashboardGuard]},
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

@Injectable()
export class DashboardGuard implements CanActivate {
  constructor(private appConfig: ApplicationConfiguration, private _router: Router) {}

  canActivate() {
    if (this.appConfig.isUserLoggedIn()) { return true; }
    this._router.navigate(['/login']);
    return false;
  }
}

---

在仪表板路线上使用警卫应该可以做到这一点

export class AppComponent {
  constructor() {}
}

export const routes: RouterConfig = [
  { path: 'login', component: LogInComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [DashboardGuard]},
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

@Injectable()
export class DashboardGuard implements CanActivate {
  constructor(private appConfig: ApplicationConfiguration, private _router: Router) {}

  canActivate() {
    if (this.appConfig.isUserLoggedIn()) { return true; }
    this._router.navigate(['/login']);
    return false;
  }
}

---

浏览器控制台里有什么吗？就像我说的，没有。。。我的感觉是，出于某种原因，可能有些东西还没有加载？如果你还需要我提供什么，请告诉我。另外，如果我重定向用户的方法不好，请让我看看如何以最佳方式进行重定向的模板/示例。抱歉，没有正确阅读：-/您可以尝试使用

setTimeout（）

绕过

this.router.navigate（）

。可能是在构造函数中更改路由导致了问题。我知道，人们不喜欢

setTimeout（）

，但我知道，如果依赖于某个特定的时间已经过去，这是不好的。在这种情况下，我不会认为它很脏。它只允许Angular在执行导航调用之前完成初始化—在处理当前事件队列之后将要完成的调用排队。我认为这更像是“排队”而不是“插队”；-）浏览器控制台里有什么吗？就像我说的，没有。。。我的感觉是，出于某种原因，可能有些东西还没有加载？如果你还需要我提供什么，请告诉我。另外，如果我重定向用户的方法不好，请让我看看如何以最佳方式进行重定向的模板/示例。抱歉，没有正确阅读：-/您可以尝试使用

setTimeout（）

绕过

this.router.navigate（）

。可能是在构造函数中更改路由导致了问题。我知道，人们不喜欢

setTimeout（）

，但我知道，如果依赖于某个特定的时间已经过去，这是不好的。在这种情况下，我不会认为它很脏。它只允许Angular在执行导航调用之前完成初始化—在处理当前事件队列之后将要完成的调用排队。我认为这更像是“排队”而不是“插队”；-）我也试过，但没有效果。我也试过使用ngOnInit，但仍然有同样的效果。很高兴听到这个消息：）我也试过，但没有效果。我会尝试制造一个劫掠品我也尝试过使用ngOnInit，但仍然很高兴听到：）