角度2 router.navigateは、アプリモジュールを考えると、ネストされたjsの機能

Question

内部の作業ではない

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/dashboardが表示されるはずですhttp://localhost:3001/。

Iはself._router.navigate（[ '/ダッシュボード']）移動した場合、 js関数の外部で、それは正常に動作します。

UPDATE：関数の外にルート変更を行うには、

正常に動作します:(しかし、私は、JS関数のコールバックにそれを必要とする

doLogin() { 

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

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

      self.goToRoute(); 
     }) 


    }));*/ 
    } 

UPDATE 3：

がそれを手に入れましたガンターに基づいて作業コメント：

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

Answer 2

これを実際に作成することで解決できました：

goToRoute(){ 

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

    } 

その後：

ExternalJS.authenticateByUser({username: this.username, password: this.password}, (response => { 
    self.goToRoute() 
}));