我正在开发一个Angular和
Spring Boot应用程序,我对Angular很新.我已经制作了一些组件,一个用于登录的组件和一个用于注册的组件,我也做了一些验证等等.现在,我想做的是当用户注册成功时用户被重定向到登录页面而且我也想要显示这样的信息:“注册成功!请登录!”我知道如何将用户重定向到登录页面,但我不知道如何为用户显示此消息.
注册ts
import { Component,OnInit,ViewChild } from '@angular/core'; import { NgForm } from '@angular/forms'; import { User } from '../model/user.model'; import { UserDataService } from '../service/data/user-data.service'; import { Router } from '@angular/router'; @Component({ selector: 'app-register',templateUrl: './register.component.html',styleUrls: ['./register.component.css'] }) export class RegisterComponent implements OnInit { invalidRegister = false; errorMessage = ''; pass1 = ''; pass2 = ''; userName: string; emailAddress: string; user: User; @ViewChild('f') signupForm: NgForm; constructor( private userDataService: UserDataService,private router: Router) { } ngOnInit() { } onSignup(form: NgForm) { if (this.signupForm.valid === false) { this.invalidRegister = true; this.errorMessage = 'You must fill in all the fields!'; } else if (this.pass1 !== this.pass2) { this.invalidRegister = true; this.errorMessage = 'The passwords do not match!'; } else { this.user = new User(this.userName,this.emailAddress,this.pass1); console.log(this.user); this.userDataService.addUser(this.user).subscribe( data => { console.log(data); },error => { if (error.error.email === "duplicated") { this.invalidRegister = true; this.errorMessage = 'The email address you have used is already registered!'; } else if (error.error.username === "duplicated") { this.invalidRegister = true; this.errorMessage = 'The username is not available!'; } },() => { this.invalidRegister = false; this.router.navigate(['login']); }) } } }
注册html
<h1>Register</h1> <div class="alert alert-warning" *ngIf="invalidRegister">{{ errorMessage }}</div> <form (ngSubmit)="onSignup()" #f="ngForm"> <div class="form-group row"> <label for="username" class="col-2 col-form-label">Username</label> <div class="col-6"> <input type="text" id="username" name="username" ngModel class="form-control" required #username="ngModel" [(ngModel)]="userName"> <span class="help-block text-danger" *ngIf="!username.valid && username.touched">The username field is required!</span> </div> </div> <div class="form-group row"> <label for="email" class="col-2 col-form-label">Email</label> <div class="col-6"> <input type="email" id="email" name="email" ngModel class="form-control" required email #email="ngModel" [(ngModel)]="emailAddress"> <span class="help-block text-danger" *ngIf="!email.valid && email.touched">Please enter a valid email!</span> </div> </div> <div class="form-group row"> <label for="password" class="col-2 col-form-label">Password</label> <div class="col-6"> <input type="password" id="password" name="password" ngModel class="form-control" required #password="ngModel" [(ngModel)]="pass1"> <span class="help-block text-danger" *ngIf="!password.valid && password.touched">The password field is required!</span> </div> </div> <div class="form-group row"> <label for="pass" class="col-2 col-form-label">Confirm Password</label> <div class="col-6"> <input type="password" id="pass" name="pass" ngModel class="form-control" required #pass="ngModel" [(ngModel)]="pass2"> <span class="help-block text-danger" *ngIf="!pass.valid && pass.touched">Please confirm your password!</span> </div> </div> <button class="btn btn-primary" type="submit">Sign Up</button> </form>
登录ts
import { Component,OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { BasicAuthenticationService } from '../service/basic-authentication.service'; @Component({ selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { username = ''; password = ''; errorMessage = 'Invalid Credentials'; invalidLogin = false; constructor( private router: Router,private basicAuthenticationService: BasicAuthenticationService) { } ngOnInit() { } handleBasicAuthLogin() { this.basicAuthenticationService.executeAuthenticationService(this.username,this.password) .subscribe( data => { console.log(data); this.router.navigate(['welcome',this.username]); this.invalidLogin = false; },error => { console.log(error); this.invalidLogin = true; } ); }
登录html
<h1>Login</h1> <div class="container"> <div class="alert alert-warning" *ngIf='invalidLogin'>{{ errorMessage }}</div> <div> User Name: <input type="text" name="username" [(ngModel)]="username" > Password: <input type="password" name="password" [(ngModel)]="password"> <button (click)="handleBasicAuthLogin()" class="btn btn-success">Login</button> </div> </div>
解决方法
注册成功后,您可以向路径添加查询参数并导航到登录
this.router.navigate(['login',{queryParams: { registered: 'true' } }]);
网址将如下所示:https://foobar.com/login ?registered = true
在login.ts中
infoMessage = ''; ngOnInit() { this.route.queryParams .subscribe(params => { if(params.registered !== undefined && params.registered === 'true') { infoMessage = 'Registration Successful! Please Login!'; } }); }
并在login.html中添加此类行
<span *ngIf="infoMessage.length > 0">{{ infoMessage }}</span>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。