Блог

У меня есть приложение, в котором пользователь может зарегистрировать учетную запись. После регистрации ему необходимо подтвердить это, введя код, который он получил по электронной почте.

Настройка следующего маршрута:

 const routes: Routes = [

  {
    path: 'register', component: RegisterComponent, children: [
      {path: 'confirm', component: ConfirmRegisterComponent, pathMatch: 'full'}
    ]
  },
];
 

RegisterКомпонент.ts:

 export class RegisterComponent implements OnInit {

  registerForm: FormGroup = new FormGroup({
    username: new FormControl('', Validators.required),
    email: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });

  constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit(): void {
  }

  performRegister() {
    console.log(this.registerForm.value);
    this.authService.register(this.username, this.email, this.password).subscribe(
      (response: AbstractResponse) => this.handleResponse(response)
    );
  }

  handleResponse(response: AbstractResponse) {
    if (response.status === 200) {
      this.router.navigate(['confirm'], {relativeTo: this.route, queryParams: {id: response.payload}})
    }
  }

  get username() {
    return this.registerForm.get('password')?.value;
  }

  get email() {
    return this.registerForm.get('email')?.value;
  }

  get password() {
    return this.registerForm.get('password')?.value;
  }

}
 

RegisterComponent.html с router-outlet :

 <router-outlet></router-outlet>
<h1>Register</h1>

<form (ngSubmit)="performRegister()" [formGroup]="registerForm">

  <div class="form-group">
    <label for="username">Username</label><br/>
    <input class="form-control" formControlName="username" id="username" name="username" ngModel
           placeholder="Username" type="text">
    <div *ngIf="username?.invalid amp;amp; (username?.dirty || username?.touched)"
         class="alert alert-danger">
      <div *ngIf="username?.errors?.required">
        Username is required.
      </div>
    </div>
    <br/>
  </div>
  <div class="form-group">
    <label for="email">Email:</label><br/>
    <input class="form-control" formControlName="email" id="email" name="email" ngModel placeholder="Email address"
           type="email">

    <div *ngIf="email?.invalid amp;amp; (email?.dirty || email?.touched)"
         class="alert alert-danger">
      <div *ngIf="email?.errors?.required">
        Username is required.
      </div>
    </div>
    <br/>
  </div>

  <div class="form-group">
    <label for="password">Your password:</label> <br/>
    <input class="form-control" formControlName="password" id="password" name="password" ngModel
           placeholder="Password" type="password">
    <div *ngIf="password?.invalid amp;amp; (password?.dirty || password?.touched)"
         class="alert alert-danger">
      <div *ngIf="password?.errors?.required">
        Username is required.
      </div>
    </div>

    <br/>
  </div>

  <div class="form-check">
    <input class="form-check-input" id="exampleCheck1" type="checkbox">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>

  <button [disabled]="!registerForm.valid" class="btn btn-secondary" type="submit">Register</button>
  <br/>

  <a routerLink="/login">Login</a>

</form>
 

RegisterConfirmation.ts:

 @Component({
  selector: 'app-confirm-register',
  templateUrl: './confirm-register.component.html',
  styleUrls: ['./confirm-register.component.css']
})
export class ConfirmRegisterComponent implements OnInit {

  private id!: string;

  public confirmationCodeForm: FormGroup = new FormGroup({
    code: new FormControl('', Validators.required),
  });

  constructor(private authService: AuthService, private router: Router, private activatedRoute: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(params => {
      this.id = params['id'];
    })
  }


  get code() {
    return this.confirmationCodeForm.get('code')?.value;
  }

  performConfirmRegistration() {
    this.authService.confirmRegistration(this.id, this.code).subscribe(
      (response: AbstractResponse) => this.handleResponse(response)
    );
  }

  handleResponse(response: AbstractResponse) {
    if (response.status === 200) {
      this.router.navigate(['login'])
    }
  }
}
 

и html:

 <h1>Confirm Registration</h1>

<form (ngSubmit)="performConfirmRegistration()" [formGroup]="confirmationCodeForm">

  <div class="form-group">
    <label for="code">Confirmation Code</label><br/>
    <input class="form-control" formControlName="code" id="code" name="code" ngModel
           placeholder="XXX-XXX-XXX" type="text">
    <div *ngIf="code?.invalid amp;amp; (code?.dirty || code?.touched)"
         class="alert alert-danger">
      <div *ngIf="code?.errors?.required">
        Confirmation code is required.
      </div>
    </div>
    <br/>
  </div>

  <button [disabled]="!confirmationCodeForm.valid" class="btn btn-secondary" type="submit">Confirm</button>
  <br/>

</form>
 

Но, похоже, он отображает оба компонента одновременно, чего я не хочу :/

Кто-нибудь может мне в этом помочь? Я знаю, что это работает без указания подтверждения как дочернего элемента реестра, но я думаю, что лучше быть ребенком.

у вас может быть маршрутизатор, такой как

 const routes: Routes = [
  {path: 'register', component: RegisterComponent}
  {path: 'register/confirm', component: ConfirmRegisterComponent}
]
 

и удалите компонент <router-outlet> Register_компонент