角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函数

回答

相关问题