Angular 2 router.navigate 在嵌套的 js 函数中不起作用

Question

给定应用模块:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { RouterModule }   from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent }        from './app.component';
import {DashboardComponent} from "./components/dashboard/dashboard.component";
import {LogoutComponent} from "./components/logout/logout.component";
import {LoginComponent} from "./components/login/login.component";
import {HttpModule} from "@angular/http";
import {PrescribeComponent} from "./components/prescribe/prescribe.component";
//import { HeroService }         from './hero.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot(),
    RouterModule.forRoot([
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'logout',
        component: LogoutComponent
      },
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'prescribe',
        component: PrescribeComponent
      }

    ])
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    LogoutComponent,
    LoginComponent,
    PrescribeComponent
  ],
  providers: [
    //HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

给定以下组件:

import {Component} from '@angular/core';
import {Router} from "@angular/router";
declare var ExternalJS: any;

@Component({
  selector: 'my-app',
  templateUrl: 'app/components/login/login.component.tpl.html',
})
export class LoginComponent {

  public redirect;
  public username: string;
  public password: string;

  constructor(public _router: Router) {

    this.username = 'someUsername';
    this.password = 'SomePassword';


  }
  doLogin() {

    var self = this;

    ExternalJS.authenticateByUser({username: this.username, password: this.password}, (response => {


     self._router.navigate(['/dashboard']);


    }));
  }

}

它导航到仪表板，但仪表板路由在 url 中消失了。

所以我剩下:http://localhost:3001/我应该在哪里看到 http://localhost:3001/dashboard .

如果我移动 self._router.navigate(['/dashboard']);在 js 函数之外，它工作正常。

更新:

在函数之外进行路由更改工作正常 :( 但我需要在 JS 函数的回调中使用它。

 doLogin() {

    var self = this;
    self.goToRoute(); //MOVED TO HERE. WORKING FINE.

    /*ExternalJS.authenticateByUser({username: this.username, password: this.password}, ((response:any) => {   

           self.goToRoute();
         })


    }));*/
  }

更新 3:

根据 Gunter 评论让它工作:

doLogin() {

    ExternalJs.authenticateByUser({username: this.username, password: this.password}, (response => {
      var self = this;
      ExternalJs.setUser(12398787, "user1", function () {
        ExternalJs.subscribeEvent({
          eventName: 'user.select',
          callback: (data => {
            self.zone.run(() => {
              self._router.navigate(['./dashboard']);
            });
          })
        });
      });
    }));
  }

更新 4:添加区域后哈希仍然消失事件。我将此添加到应用程序模块:

providers: [
    {provide: LocationStrategy, useClass: HashLocationStrategy}
  ]

，它解决了这个问题。

Answer 1

您可能需要确保代码在 Angulars 区域内执行，否则更改检测将不会运行，这会导致 router.navigate() 无法按预期工作:

constructor(public _router: Router, private zone:NgZone) {

ExternalJS.authenticateByUser({username: this.username, password: this.password}, (response => {
  this.zone.run(() =>  
    this._router.navigate(['/dashboard']);
  });
}));

如果您使用 => 则不需要 self