要实现“登录页面在不点击提交按钮的情况下重定向到首页”,可以使用Angular的路由守卫来实现。以下是一个示例代码:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AuthService } from './auth.service';
import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';
import { HomeComponent } from './home.component';
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent }
];
@NgModule({
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ],
declarations: [ AppComponent, LoginComponent, HomeComponent ],
providers: [ AuthService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthService implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('isLoggedIn') === 'true') {
return true;
}
this.router.navigate(['/login']);
return false;
}
}
isLoggedIn标记设置为true,并重定向到首页。在login.component.ts文件中编写以下代码:import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
template: `
Login Page
`
})
export class LoginComponent {
constructor(private router: Router) { }
login() {
// 登录逻辑
localStorage.setItem('isLoggedIn', 'true');
// 重定向到首页
this.router.navigate(['/home']);
}
}
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'app-home',
template: `
Home Page
`
})
export class HomeComponent {
constructor(private authService: AuthService) { }
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent { }
现在,当用户访问根路径('/')时,将会重定向到登录页面。如果在不点击提交按钮的情况下,直接访问首页('/home'),将会被路由守卫拦截并重定向到登录页面。只有在登录成功后,才能访问首页。