时间戳

首页 > 解决方案 > 检查角度8中的条件后如何重定向到另一个组件？

angular - 检查角度8中的条件后如何重定向到另一个组件？

问题描述

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

登录后，我想使用角度 8 中的路由重定向到带有欢迎消息的另一个组件：提前致谢！！！！

标签： angulartypescriptangular8

解决方案

在模块文件中定义路由（例如 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
}

有关更多详细信息，请参阅此处。

推荐阅读