Как перенаправить на другой компонент после проверки условий в angular 8?

Question

Я новичок в Angular 8, и я делаю компонент входа в систему, и после ввода имени пользователя и пароля я хочу перенаправить на другой компонент, используя маршрут, который является моим кодом. Я много сделал:

мой компонент входа в систему .ts:

       import { Component, OnInit } from '@angular/core';
       import{FormGroup,FormBuilder,Validators} from '@angular/forms'


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  myForm:FormGroup
  submitted=false;
  _baseURL : string;
  formvalid: boolean;
   user:string;
   pwd:string;
  constructor(private formbuilder:FormBuilder){}


  ngOnInit(){
    this.myForm = this.formbuilder.group({
    username:['',Validators.required],
    password:['',[Validators.required,Validators.pattern("^(?=.*?[a-z])(.{13,}|(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,12})$")]]
    });
    this._baseURL="";
    this.formvalid=false;
  }

  Submitme(){
    this.submitted = true;

    if (this.myForm.invalid) {
      this.formvalid=false;
        return;
    }
    if (this.myForm.valid) {
      this.formvalid=true;
    this._baseURL= 'Welcome'+" "+ this.myForm.controls.username.value;
  }
  this.user=this.myForm.controls.username.value;
  this.pwd=this.myForm.controls.password.value;
}
rest(){
  this.myForm.reset();
  this.submitted = false;
}
}

мой компонент входа html:

        <h1 class="text-center" [hidden]="formvalid">Login</h1>
          <form [formGroup]="myForm" (ngSubmit)="Submitme()" class="text-center">
           <div class="container bg-dark" [hidden]="formvalid" style="border: 1px solid black;">
         <div class="row mt-3">
           <div class="col-lg-5">
         <label for="name" class="text-white">Username :</label>
         </div>
         <input type="text" formControlName="username" class="col-lg-4 form-control"
           [ngClass]="{ 'is-invalid': submitted &amp;&amp; myForm.controls.username.errors }">
          <div *ngIf="submitted &amp;&amp; myForm.controls.username.errors" class="text-danger">
            <div *ngIf="myForm.controls.username.errors.required">First Name is required</div>
        </div>
       </div>
     <div class="row mt-2">
           <div class="col-lg-5">
       <label for="pwd" class="text-white">Password :</label>
         </div>
      <input type="password" formControlName="password" class="col-lg-4 form-control"
      [ngClass]="{ 'is-invalid': submitted &amp;&amp; myForm.controls.password.errors }">
       <div *ngIf="submitted &amp;&amp; myForm.controls.password.errors" class="text-danger">
     <div *ngIf="myForm.controls.password.errors.required">password is required</div>
      <div *ngIf="myForm.controls.password.errors.pattern">Pwd must contain atleast one upper and 
    lower case character one special character one digit and 8 characters in length  </div>
   </div>
    </div>
     <button class="btn btn-primary mt-2 mb-3" type="submit" 
   [routerLink]="'/afterlog'">Submit</button>&nbsp;
     <input type="button" (click)="rest()" value="Reset" class="btn btn-primary mt-2 mb-3">
 </div>
      </form>

После входа я хочу перенаправить на другой компонент с приветственным сообщением, используя маршрутизацию в angular 8: Спасибо заранее !!!!

Answer 1

Определите маршруты в файле модуля (например, app.module):

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'welcome', component: WelcomeComponent },
];

@NgModule({
   imports: [
    RouterModule.forRoot(appRoutes)
  ],
  ...
})

И в компоненте входа в систему:

import { Router } from '@angular/router';

constructor(private formbuilder: FormBuilder, private _router: Router) { }

Submitme() {
  ...
  this._router.navigateByUrl('/welcome');  // open welcome component
}

Для получения более подробной информации см. здесь .

Answer 2

я думаю, что вы хотите перейти к новому компоненту и отправить новые данные, чтобы показать там приветственное сообщение, вы можете перейти с отправкой queryParams, отправив ваше имя пользователя как queryParam для приветствия компонента. Вы можете сохранить зарегистрированного пользователя в localstorage , если хотите, и избегать отправки его в качестве параметра запроса

this.router.navigate(['/welcome'], { queryParams: { username: this.myForm.controls.username.value} });

, и вы можете создать сообщение в своем welcome.component .ts

username: string;
constructor(private route: ActivatedRoute) {
    this.username= this.route.snapshot.paramMap.get('username');
}

и в вашем welcome.component. html

<div>Welcome {{username}}!</div>

Answer 3

Так что, если я правильно понимаю, вы хотите перейти на новую страницу после отправки формы?

Сначала вам нужно добавить класс Router в ваш конструктор. Добавьте это в свой конструктор: private router: Router

И добавьте этот импорт: import { Router } from '@angular/router';

Теперь вы можете использовать класс Router в вашем файле TS.

для перехода на другую страницу вы используете следующий синтаксис: this.router.navigate(['/']); В приведенном выше примере вы перейдете на домашнюю страницу.

Вы также можете перемещаться относительно некоторого пути следующим образом: Сначала добавьте это в свой конструктор: private route: ActivatedRoute И импортируйте ActivatedRoute. Затем вы можете перемещаться относительно текущего маршрута следующим образом: this.router.navigate(['../../'], { relativeTo: this.route });

this.route является ссылкой ActivatedRoute

Подробнее о проверке маршрутизации и навигации: https://angular.io/guide/router