加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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:
添加区域后,哈希仍然消失.我将此添加到app模块:

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

如果你使用=>没有必要自我

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读