javascript - Angular - Nach der Registrierung zur Anmeldung umleiten und eine Nachricht anzeigen

Ich arbeite an einer Angular- und Spring-Boot-App und ich bin sehr neu in Angular. Ich habe einige Komponenten erstellt, eine Komponente für die Anmeldung und eine für die Registrierung, außerdem habe ich einige Validierungen gemacht usw. Jetzt möchte ich, dass der Benutzer nach einer erfolgreichen Registrierung zur Anmeldeseite weitergeleitet wird und dass auch eine Nachricht wie folgt angezeigt wird: „Registrierung erfolgreich! Bitte anmelden!“ Ich weiß, wie man den Benutzer zur Anmeldeseite weiterleitet, aber ich weiß nicht, wie man diese Nachricht für den Benutzer anzeigt.

Registriere 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 registrieren

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

Anmelden 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;
        }
      );
  }

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

Antwort #1

Wenn die Registrierung erfolgreich ist, können Sie Abfrageparameter zur Route hinzufügen und zur Anmeldung navigieren.

this.router.navigate(['login'], {queryParams: { registered: 'true' } });

Die URL wird so aussehen: https://foobar.com/login?registered=true

In login.ts

infoMessage = '';
ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        if(params.registered !== undefined && params.registered === 'true') {
            infoMessage = 'Registration Successful! Please Login!';
        }
      });
}

Und füge diese Art von Zeile in login.html ein

<span *ngIf="infoMessage.length > 0">{{ infoMessage }}</span>