Невозможно показать другую страницу после проверки учетных данных с использованием маршрутизации в AngularJS - PullRequest
Новая
       21

Невозможно показать другую страницу после проверки учетных данных с использованием маршрутизации в AngularJS

0 голосов
/ 03 мая 2019

Невозможно направить пользователя на другую страницу после проверки учетных данных с помощью модуля маршрутизации в AngularJS.

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

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormGroup } from '@angular/forms';
import { Router } from '@angular/router'
import { HomePageComponent} from './home-page/home-page.component'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'inkOrderSite';
  validCredentials: boolean = true;
  loginForm: FormGroup;
  ngOnInit() {
    this.createForm();
  }

  constructor(private router: Router) {}

  private createForm() {
    this.loginForm = new FormGroup({
      emailaddress: new FormControl('', [
        Validators.required,
        Validators.email,
      ]),
      password: new FormControl('', [
        Validators.required,
      ]),
    })
  };

  onClick() {
    console.log(this.loginForm.value.emailaddress + this.loginForm.value.password)
    if (this.loginForm.value.emailaddress === 'admin@admin.com' && this.loginForm.value.password === "admin") {
      console.log('credentials are correct');
      this.validCredentials = true;
    }
    else {
      console.log('Provide valid credentials');
      this.validCredentials = false;
      this.router.navigate(["HomePage"]);
    }

  };

  navigate(): void{
    console.log('clicked');
    this.router.navigate(["HomePage"]);
  }

}

приложение-routing.module.ts 

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePageComponent} from './home-page/home-page.component';
import { AppComponent } from './app.component';

export const routes: Routes = [
  {path: 'HomePage', component: HomePageComponent},
  { path: '', component: AppComponent }
];


export const AppComponents: any = [
  AppComponent,
  HomePageComponent  
];

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

export class AppRoutingModule { 

}

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CustomMaterialModule } from './material.modules';
import { HomePageComponent } from './home-page/home-page.component';
import { RouterModule } from '@angular/router';
import { AppComponents, routes } from "./app-routing.module";

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
    AppComponents
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    CustomMaterialModule,
    RouterModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Еще одна странная вещь: если у меня есть файл { path: '', component: AppComponent } в файле app-routing.module.ts, то в идеале мне нужно перейти на страницу home-page.component.html, но меня все еще переносят на страницу app.component.html. , Поэтому я думаю, что я где-то в корне ошибаюсь и не знаю, где.

этот код также доступен на https://github.com/vikranth06/Angular

...