Question

我正在Angular6上做项目。单击登录按钮后，它应该导航到仪表板。但是它将在同一页面上显示仪表板内容。谁能帮我解决这个问题。

请在下面找到链接以查看屏幕截图。 https://imagizer.imageshack.com/img924/79/vtPsDp.png

这是我的代码。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { CustomMaterialModule } from './material.module';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactUsComponent,
    AboutUsComponent,
    LoginComponent,
    UserComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomMaterialModule,
    FormsModule,
    BrowserAnimationsModule

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

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { DashboardComponent } from './dashboard/dashboard.component';


const routes: Routes = [
{
path:'home',
component:HomeComponent
},
{
    path:'aboutUs',
    component:AboutUsComponent
},
{
    path:'contactUs',
    component:ContactUsComponent

},
{
    path:'dashboard',
    component:DashboardComponent
}
];

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

app.component.html

<html>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">

 <div class="container">
    <a class="navbar-brand" href="#">
          <img class="logo" src="assets/school-logo3.png" alt="">
        </a>
</div>

<div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">AUSTIN ASSISTANT SCHOOL</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div> 


    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
            <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" routerLink="aboutUs">aboutUs</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" routerLink="contactUs">contactUs</a>
            </li>
        </ul>

  </div>
</nav>

<div>
  <img class="logo1" src="assets/school_kidz.jpg" alt="">
  </div>
  <div class="right">
  <app-login></app-login>
</div>


  <footer class="page-footer navbar-fixed-bottom">
    <div class="fixed_footer">@Copyright 2019</div>
</footer>
</html>
<router-outlet></router-outlet>

login.component.html

 <div class="row">
  <div class="col-md-6">
    <h1>Login </h1>
    <form>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" name="email" [(ngModel)]="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" name="passowrd" [(ngModel)]="password">
      </div>
      <button class="btn btn-primary" (click)="login()">Login</button>
    </form>
  </div>
</div>
<router-outlet></router-outlet>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import { DashboardComponent } from 'src/app/dashboard/dashboard.component';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
email: string;
password: string;
constructor(private router : Router) { }
ngOnInit() {
}
login() {
if(this.email == 'n@gmail.com' && this.password == '123') {
this.router.navigate(['dashboard']);
alert("right credentials");
}else {
alert("Invalid credentials.");
}
}
}

Answer 1

是的，肯定会在此处显示登录页面，因为您的路由器插座位于该页面的下方。

因此，您可以通过将路由器插座保留在您的应用程序component.html中来解决它。

并在应用程序路由文件中添加到登录页面的路由。

{

path：''，

redirectTo：'/ login'，

pathMatch：“已满”

}

路由器导航附加组件，而不是relpace组件

1 个答案: