Angular 2 router.navigate在嵌套的js函数中不起作用
发布时间:2020-12-17 17:40:01 所属栏目:安全 来源:网络整理
导读:鉴于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-boots
鉴于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,((response:any) => { self.goToRoute(); }) }));*/ } 更新3: 根据Gunter评论: doLogin() { ExternalJs.authenticateByUser({username: this.username,(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} ] ,它解决了这个问题. 解决方法
您可能需要确保代码在Angulars区域内执行,否则更改检测将不会运行,这会导致router.navigate()无法按预期工作:
constructor(public _router: Router,private zone:NgZone) { ExternalJS.authenticateByUser({username: this.username,(response => { this.zone.run(() => this._router.navigate(['/dashboard']); }); })); 如果你使用=>没有必要自我 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |