Angular - 注册后重定向到登录并显示消息

Question

我正在开发一个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>  

Answer 1

注册成功后,您可以向路径添加查询参数并导航到登录

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>