无法在角度5中从一个页面导航到另一个页面

Question

这是我的app.component.html文件

<div align="center">
    <form (ngSubmit)="onLoginSubmit()" class="fullForm">
        <div class="imgcontainer">
        </div>
        <h2>PL Auth</h2>
        <div class="container">
            <form (ngSubmit)="generateOtpSubmit()" class="generateOtpForm">
                <label>
                    <b>Username: </b>
                </label>
                <input type="text" placeholder="Enter Username" id="username" [(ngModel)]=userName name="uname"
                       required>
                <br>
                <br>
                <label>
                    <b>Password : </b>
                </label>
                <input type="password" placeholder="Enter Password" id="password" [(ngModel)]=password name="psw"
                       required>
                <br>
                <br>
                <button type="submit" class="otpButton">Generate OTP</button>
            </form>
            <br>
            <br>
            <label>
                <b>Enter OTP : </b>
            </label>
            <input type="text" placeholder="Enter OTP" id="otp" [(ngModel)]=otp name="otp" required>
            <br>
            <br>
            <button type="submit" class="loginButton">Login</button>
        </div>
        <div><p style="color:red;">{{ loginStatus }}</p></div>
    </form>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Headers, Http, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router'; 
import { Text } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  otpsubmitted = false;
  loginSubmitted = false;
  userName = '';
  password = '';
  otp ='';
  userAuthCheck:Text;
  checkOtp:Text;
  authCheck ='';
  loginStatus='';

  ngOnInit() {
  }

  constructor(private http: Http,private httpClient: HttpClient,private route: Router ) { }

  private generateOtp(){
    this.http.post('http://localhost:8080/generateotp', {
      userName: this.userName
    })
      .subscribe(
        res => {
          console.log(res);
        },
        err => {
          console.log("Error occured");
        }
      );
  }

  private logSubmit(){
    this.http.post('http://localhost:8080/authUser', {
      userName: this.userName,
      password: this.password,
      otp: this.otp
    })
      .subscribe(
        res => {
          const printResp=res.json();
          console.log(res);
          //this.loginStatus=printResp.status;

          if (printResp.status === 'true'){
            this.loginStatus =  '';
            this.route.navigate(['/homepage']);
          } else if(printResp.status === 'false') {
                this.loginStatus =  printResp.Data.errorMessage;                          
          }
           },
        err => {
          console.log("Error occured"+err);
        }
      );
  }


  generateOtpSubmit() {
    this.otpsubmitted = true;
    this.generateOtp();
  }

  onLoginSubmit(){
    this.loginSubmitted = true;
    this.logSubmit();
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { HomepageComponent } from './homepage/homepage.component';

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    HttpModule,
    AppRoutingModule 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

APP-routing.module.ts

import { HomepageComponent } from './homepage/homepage.component';

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

const routes: Routes = [
  {path: 'homepage', component: HomepageComponent}
];

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

export class AppRoutingModule {}

homepage.component.html

<p>
  homepage works!
</p>

在app.component.html和app.component.ts中，我正在尝试从app.component.html导航到homepage.component.html。在app.component.ts中 我在http响应中配置了导航代码。但我无法导航到该页面

Answer 1

在app.component.html中添加<router-outlet></router-outlet>。

Answer 2

我认为在您的路由配置中，您应该添加/在路径中添加

const routes: Routes = [ {path: '/homepage', component: HomepageComponent} ];

Answer 3

试一试：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { routing } from './app-routing.module';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { HomepageComponent } from './homepage/homepage.component';
import { CommonModule } from '@angular/common';




@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
     routing,
    ReactiveFormsModule,
    CommonModule,
    HttpModule,
    HttpClientModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

APP-routing.module.ts

import { HomepageComponent } from './homepage/homepage.component';

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

const APP_ROUTES: Routes = [
  {path: 'homepage', component: HomepageComponent}
];

export const routing = RouterModule.forRoot(APP_ROUTES); 

homepage.component.html

<router-outlet></router-outlet>