Question

我有一个带有角度2的项目。这个项目有一个登录服务来验证用户。这是我的loginService.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GlobalVariableService } from '../service/globalVariableService';
import { HttpErrorResponse } from '@angular/common/http/src/response';
import { CookieService } from 'ngx-cookie-service';
import { Observable } from 'rxjs/Observable';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

import 'rxjs/add/operator/map';

@Injectable()
export class LoginService {
    constructor(
        private globalVariableService: GlobalVariableService,
        private http: HttpClient,
        private cookieService: CookieService,
        private router: Router
    ) {

    }

    isLoggedin: boolean = false;

    getCurrentUser() {
        var url = this.globalVariableService.baseURL + '/users/me';
        return this.http.get(url);
    }

    loginUser(email: string, password: string) {
        var obj = {email:email, password: password};
        var url = this.globalVariableService.baseURL + '/users/login';
        return this.http.post(url, obj)
    }   
}

然后我有一个组件来处理来自用户login-page-admin.componen.ts形式的输入：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';

import { LoginService } from '../service/loginService';
import { EventService } from '../service/eventService';

interface loginResponse {
  status: boolean;
  code: number,
  message: Object
}

@Component({
  selector: 'app-login-page-admin',
  templateUrl: './login-page-admin.component.html',
  providers: [LoginService],
  styleUrls: ['./login-page-admin.component.css', '../app.component.css', '../css/login.css']
})
export class LoginPageAdminComponent implements OnInit {
  email: string;
  password: string;

  constructor(
    private router : Router,
    private loginService : LoginService,
    private cookieService: CookieService
  ){ }

  ngOnInit() {
  }

  postLogin(){
    var self = this;
    self.loginService.loginUser(this.email, this.password)
    .subscribe(function(data: loginResponse){
      console.log(data.status);
      if(data.status == false){
        console.log('FAILED!!');
        this.router.navigate(['#']);
      } else {
        console.log('LOGIN SUCCEED!');
        this.router.navigate(['events']);
      }
    })
  }
}

[已编辑]：这是我的app.module.ts（路由）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateTimePickerModule } from 'ng-pick-datetime';

import { CookieService } from 'ngx-cookie-service';

// routing
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: 'login-page', component: LoginPageComponent},
  { path: 'login-page-admin', component: LoginPageAdminComponent},
  { path: '', component: SetupEventComponent },
  { path: 'events', component: EventsComponent},
  { path: 'room/:eventId', component: RoomComponent},
  { path: 'room-supervisor/:eventId', component: RoomSupervisorComponent},
  { path: 'room-engagement/:eventId', component: RoomEngagementComponent},
  { path: 'setup', component: SetupEventComponent },
  { path: 'display/:roomId', component: DisplayComponent},
  { path: 'in-gate/:eventId/:roomId', component: InGateComponent},
  { path: 'out-gate/:eventId/:roomId', component: OutGateComponent},
  { path: 'in-gate-bypass/:eventId/:roomId', component: InGateBypassComponent},
  { path: 'out-gate-bypass/:eventId/:roomId', component: OutGateBypassComponent},
  { path: 'in-gate-qrcode/:eventId/:roomId', component: InGateQRCodeComponent},

];

// services
import { GlobalVariableService } from './service/globalVariableService';

// components
import { RoomComponent } from './room/room.component';
import { SetupEventComponent } from './setup-event/setup-event.component';
import { DisplayComponent } from './display/display.component';
import { InGateComponent } from './in-gate/in-gate.component';
import { OutGateComponent } from './out-gate/out-gate.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { UserAdministrationComponent } from './user-administration/user-administration.component';
import { LoginPageAdminComponent } from './login-page-admin/login-page-admin.component';
import { RoomSupervisorComponent } from './room-supervisor/room-supervisor.component';
import { RoomEngagementComponent } from './room-engagement/room-engagement.component';
import { EventsComponent } from './events/events.component';
import { AutofocusDirective } from './autofocus.directive';
import { InGateBypassComponent } from './in-gate-bypass/in-gate-bypass.component';
import { OutGateBypassComponent } from './out-gate-bypass/out-gate-bypass.component';
import { InGateQRCodeComponent } from './in-gate-qrcode/in-gate-qrcode.component';


@NgModule({
  declarations: [
    AppComponent,
    RoomComponent,
    SetupEventComponent,
    DisplayComponent,
    InGateComponent,
    OutGateComponent,
    LoginPageComponent,
    UserAdministrationComponent,
    LoginPageAdminComponent,
    RoomSupervisorComponent,
    RoomEngagementComponent,
    EventsComponent,
    AutofocusDirective,
    InGateBypassComponent,
    OutGateBypassComponent,
    InGateQRCodeComponent,
  ],
  imports: [
    AngularFontAwesomeModule,
    NgbModule.forRoot(),
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(routes, {useHash: true}),

    BrowserAnimationsModule,
    DateTimePickerModule
  ],
  providers: [
    GlobalVariableService,
    CookieService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我在浏览器中尝试此操作时，身份验证可以正常工作，但无法根据代码路由到另一个路径。那么我的代码有什么问题呢？谢谢你的回答

Answer 1

没有'＃'状态，更改

这

 this.router.navigate(['#']);

要

 this.router.navigate(['']);

，路线应为

{ path: '/events', component: EventsComponent},

修改

您需要使用下面评论中提到的箭头功能

Angular 2路由器无法导航到其他路由

1 个答案: