javascript - 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>

登录时间

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>