检查角度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>

登录后，我想使用角度 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
}

更多详情请咨询here。

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

现在您可以在 TS 文件中使用 Router 类。

要导航到其他页面，请使用以下语法：this.router.navigate(['/']); 上面的示例将转到主页。

您还可以相对于某些路径进行导航，如下所示： 首先将其添加到您的构造函数中：private route: ActivatedRoute 并导入ActivatedRoute 然后你可以像这样相对于当前路线导航：this.router.navigate(['../../'], { relativeTo: this.route });

this.route 是 ActivatedRoute 引用

有关路由和导航检查的更多信息：https://angular.io/guide/router