[英]Angular 2 router can't navigate to other route
我有一个角度为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 { }
当我在浏览器中尝试该操作时,身份验证有效,但根据代码无法路由到其他路径。 那么我的代码有什么问题呢? 谢谢你的回答
没有状态为“#”的更改
从
this.router.navigate(['#']);
至
this.router.navigate(['']);
路线应该是
{ path: '/events', component: EventsComponent},
编辑
您需要使用箭头功能,如下面的注释中所述
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.