[英]Angular 2 router.navigate not working inside nested js function
鑒於app模塊:
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(['/ 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:添加區域后,哈希仍然消失。 我將此添加到app模塊:
providers: [
{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
我實際上能夠通過創建這個來解決:
goToRoute(){
this._router.navigate(['/dashboard']);
}
然后:
ExternalJS.authenticateByUser({username: this.username, password: this.password}, (response => {
self.goToRoute()
}));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.