角2 router.navigate不嵌套js函數

內工作鑑於該應用模塊：角2 router.navigate不嵌套js函數

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']); 


    })); 
    } 

}

它導航到儀表板，但在信息中心的路線的消失網址。

所以我留下：http://localhost:3001/，我應該看到http://localhost:3001/dashboard。

如果我移動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(); 
     }) 


    }));*/ 
    }

更新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']); 
      }); 
      }) 
     }); 
     }); 
    })); 
    }

UPDATE 4：添加區域後，散列仍然消失。我將此添加到應用模塊：

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

，並解決了問題。

來源

2016-12-04 Judson Terrell

不知您的路由設置？ –

UPPATE 4：添加區域後，散列仍然消失。我將此添加到應用程序模塊：提供程序：[ {provide：LocationStrategy，useClass：HashLocationStrategy} ]， –

你可能需要確保代碼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

來源

2016-12-04 20:01:54

Gunter，這是路線。我看到/儀表板一秒鐘，然後當它留在/儀表板上，路線切換到/登錄，但它仍然在儀表板上 –

我不知道你的應用程序中有什麼。你可以在Plunker中重現嗎？ –

Gunter我添加了我的應用程序模塊和路線 –

我居然能創造這樣來解決：

goToRoute(){ 

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

    }

然後：

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

來源

2016-12-04 20:16:09

角2 router.navigate不嵌套js函數

回答

相關問題