Когда angular запускает первую страницу, он показывает страницу входа в систему, и требуется, чтобы она перешла к другому компоненту.

Question

Итак, когда страница входа загружена, после ввода правильных учетных данных она должна перейти к компоненту BookRide и отобразить содержимое bookride html. Но он не переходит к bookride и застревает на странице входа даже после ввода правильных учетных данных.

Это мой класс маршрутизации.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { BookRideComponentComponent } from './book-ride-component/book-ride-component.component';
import { OfferRideComponent } from './offer-ride/offer-ride.component';


const routes: Routes = [
  {path:'login', component:LoginComponent},
  {path:'book-ride', component:BookRideComponentComponent},
  {path:'ride-details', component:OfferRideComponent},
  {path:'', redirectTo: 'login', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Это мой класс компонента входа

```import { Component, OnInit } from '@angular/core';
import { Login } from './Login';
import { RestServiceService } from '../rest-service.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';



@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // difference: number;

  loginForm: FormGroup;
  login = new Login();
  flag: boolean;
  msg= '';
  htmlname='';
  htmlpwd='';
  submitted= false;
  users: any[];
  // destination='';

  constructor(private restService: RestServiceService, private fb: FormBuilder,private router: Router) {
    this.restService.getUsers().subscribe(users => this.users = users);
  }

  onSubmit(){
    this.submitted=true;
    this.flag = this.users.some(item => {
      return item.username === this.htmlname && item.password === this.htmlpwd
    });
    }

    ngOnInit() {
      this.loginForm =  this.fb.group({
        user: ['', Validators.required],
        pass: ['',Validators.required]
      });
    }
  }```

А это мой логин html класс

    <div class="container-fluid">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">PoolCarz</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="nav-item">
                <a href="#" class="nav-link">LogOut</a>
            </li>
        </ul>
    </div>
</nav>



<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 mx-auto" style="margin-top: 50px;">
            <div class="card bg-light">
                <div class="card-header text-left">
                    Login
                </div>
                    <div class="card-body">
                        <form [formGroup]="loginForm" (ngSubmit) = "onSubmit()">
                            <div class="form-group">
                                <label>Username</label>
                                <input type="text" class="form-control" [(ngModel)]="htmlname" formControlName="user">
                                <p *ngIf="loginForm.controls.user.errors" style="color: red">This field is required!</p>
                            </div>
                            <div class="form-group">
                                <label>Password</label>
                                <input type="password" class="form-control" [(ngModel)]="htmlpwd" formControlName="pass">
                                <p *ngIf="loginForm.controls.pass.errors" style="color: red">This field is required!</p>
                            </div>
                            <div class="form-group">
                                <button type="submit" [routerLink]="['/book-ride']" class="btn btn-primary">Login</button><br>
                                <!-- <p>{{msg}}</p> -->
                            </div>
                            <div *ngIf="submitted">
                                <div *ngIf="flag; else failureMsg">
                                    <!-- <a [routerLink]="['/book-ride']">Book Ride</a> -->
                                    <h4>Welcome</h4>
                                </div>
                                <ng-template #failureMsg>
                                    <h4>Invalid</h4>
                                </ng-template>
                            </div>
                        </form>
                    </div>
                </div>
        </div>
    </div>
</div>```