Html 无法导航到angular 10中的其他组件页_Html_Css_Angular_Bootstrap 4

Html 无法导航到angular 10中的其他组件页

html css angular bootstrap-4

Html 无法导航到angular 10中的其他组件页,html,css,angular,bootstrap-4,Html,Css,Angular,Bootstrap 4,我正在使用Angular 10构建一个名为：网球俱乐部管理的示例项目。在这里，我有应用程序组件和仪表板组件。在app.component.html中，我创建了一个登录名，该登录名需要两个输入用户名和密码，并包含登录按钮。现在单击登录按钮，它应该验证字段并将其导航到dashboard.html 下面是代码文件和屏幕截图 import {Component} from '@angular/core'; import {Router} from '@angular/router'; @Compone

我正在使用Angular 10构建一个名为：网球俱乐部管理的示例项目。在这里，我有应用程序组件和仪表板组件。在app.component.html中，我创建了一个登录名，该登录名需要两个输入用户名和密码，并包含登录按钮。现在单击登录按钮，它应该验证字段并将其导航到dashboard.html

下面是代码文件和屏幕截图

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tennis-Angular';

  constructor(private router: Router) {}

  // tslint:disable-next-line:typedef
  validateLogin(username: string, password: string) {
    if (username === 'mohit' && password === 'sharma') {
      // alert('Login Successful !');
      this.router.navigate(['../dashboard']);
    } else if (username === '' && password === '') {
      alert('Email and Password cannot be blank !');
    } else if (username === '') {
      alert('Email cannot be blank !');
    } else if (password === '') {
      alert('Password cannot be blank !');
    } else {
      alert('Incorrect Email or Password !');
    }
  }
}

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

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
  {path: 'dashboard', component: DashboardComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
    imports: [
        BrowserModule,
        NgbModule,
        FormsModule,
      RouterModule.forRoot(appRoutes)
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.backgroundDiv {
  background: url('https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg') no-repeat center center fixed;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 0.80;
}

.table {
  display: block;
  margin: 0 auto;
  height: auto;
  width: 25%;
  background-color: white;
  /*margin-top: 15%;*/
  text-align: center;
}

.btn-primary {
  margin-left: 20%;
  margin-top: 10%;
}

.forgot-password {
  margin-top: 8%;
}

img {
  margin: 0 auto;
  height: auto;
  position: relative;
  margin-top: 5%;
  margin-left: 50%;
  max-width: 25%;
  height: auto;
}

tbody {
  background-color: white;
}

h6 {
  margin-left: 100%;
  width: 150%;
  margin-top: 5%;
  color: mediumseagreen;
  text-shadow: mediumseagreen;
}

app.component.html

<div class="backgroundDiv">
<!--  <div>-->
<!--    <img class="img-fluid backgroundimage" src="https://rrtennis.co.uk/wp-content/uploads/2017/04/Restyled-Logo-2-SD-small.png" alt="Tennis Logo">-->
<!--  </div>-->
  <div class="text-center">
    <img class="rounded mx-auto d-block" src="https://rrtennis.co.uk/wp-content/uploads/2017/04/Restyled-Logo-2-SD-small.png" alt="Tennis Logo">
    <div class="text-center">
      <table class="table table-borderless">
        <tr><h6>Admin Login</h6></tr>
        <tbody>
        <tr>
          <th class="col-xs-5">Username</th>
          <td class="col-xs-5"><input type="text" #username></td>
        </tr>
        <tr>
          <th class="col-xs-5">Password</th>
          <td class="col-xs-5"><input type="password" #password></td>
        </tr>
        <tr>
          <td class="col-xs-5"><button  class="btn btn-primary" (click)="validateLogin(username.value,password.value)">Login</button></td>
          <td class="col-xs-5"><label class="forgot-password">Forgot Password ?</label></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


<!--  https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg  -->
<!--  https://i.pinimg.com/originals/81/23/d4/8123d454ca0cc8f36d311cebbd5d3922.png  -->

<p>dashboard works!</p>

应用程序模块.ts

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tennis-Angular';

  constructor(private router: Router) {}

  // tslint:disable-next-line:typedef
  validateLogin(username: string, password: string) {
    if (username === 'mohit' && password === 'sharma') {
      // alert('Login Successful !');
      this.router.navigate(['../dashboard']);
    } else if (username === '' && password === '') {
      alert('Email and Password cannot be blank !');
    } else if (username === '') {
      alert('Email cannot be blank !');
    } else if (password === '') {
      alert('Password cannot be blank !');
    } else {
      alert('Incorrect Email or Password !');
    }
  }
}

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

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
  {path: 'dashboard', component: DashboardComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
    imports: [
        BrowserModule,
        NgbModule,
        FormsModule,
      RouterModule.forRoot(appRoutes)
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.backgroundDiv {
  background: url('https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg') no-repeat center center fixed;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 0.80;
}

.table {
  display: block;
  margin: 0 auto;
  height: auto;
  width: 25%;
  background-color: white;
  /*margin-top: 15%;*/
  text-align: center;
}

.btn-primary {
  margin-left: 20%;
  margin-top: 10%;
}

.forgot-password {
  margin-top: 8%;
}

img {
  margin: 0 auto;
  height: auto;
  position: relative;
  margin-top: 5%;
  margin-left: 50%;
  max-width: 25%;
  height: auto;
}

tbody {
  background-color: white;
}

h6 {
  margin-left: 100%;
  width: 150%;
  margin-top: 5%;
  color: mediumseagreen;
  text-shadow: mediumseagreen;
}

app.component.css

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tennis-Angular';

  constructor(private router: Router) {}

  // tslint:disable-next-line:typedef
  validateLogin(username: string, password: string) {
    if (username === 'mohit' && password === 'sharma') {
      // alert('Login Successful !');
      this.router.navigate(['../dashboard']);
    } else if (username === '' && password === '') {
      alert('Email and Password cannot be blank !');
    } else if (username === '') {
      alert('Email cannot be blank !');
    } else if (password === '') {
      alert('Password cannot be blank !');
    } else {
      alert('Incorrect Email or Password !');
    }
  }
}

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

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
  {path: 'dashboard', component: DashboardComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
    imports: [
        BrowserModule,
        NgbModule,
        FormsModule,
      RouterModule.forRoot(appRoutes)
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.backgroundDiv {
  background: url('https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg') no-repeat center center fixed;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 0.80;
}

.table {
  display: block;
  margin: 0 auto;
  height: auto;
  width: 25%;
  background-color: white;
  /*margin-top: 15%;*/
  text-align: center;
}

.btn-primary {
  margin-left: 20%;
  margin-top: 10%;
}

.forgot-password {
  margin-top: 8%;
}

img {
  margin: 0 auto;
  height: auto;
  position: relative;
  margin-top: 5%;
  margin-left: 50%;
  max-width: 25%;
  height: auto;
}

tbody {
  background-color: white;
}

h6 {
  margin-left: 100%;
  width: 150%;
  margin-top: 5%;
  color: mediumseagreen;
  text-shadow: mediumseagreen;
}

dashboard.component.html

<div class="backgroundDiv">
<!--  <div>-->
<!--    <img class="img-fluid backgroundimage" src="https://rrtennis.co.uk/wp-content/uploads/2017/04/Restyled-Logo-2-SD-small.png" alt="Tennis Logo">-->
<!--  </div>-->
  <div class="text-center">
    <img class="rounded mx-auto d-block" src="https://rrtennis.co.uk/wp-content/uploads/2017/04/Restyled-Logo-2-SD-small.png" alt="Tennis Logo">
    <div class="text-center">
      <table class="table table-borderless">
        <tr><h6>Admin Login</h6></tr>
        <tbody>
        <tr>
          <th class="col-xs-5">Username</th>
          <td class="col-xs-5"><input type="text" #username></td>
        </tr>
        <tr>
          <th class="col-xs-5">Password</th>
          <td class="col-xs-5"><input type="password" #password></td>
        </tr>
        <tr>
          <td class="col-xs-5"><button  class="btn btn-primary" (click)="validateLogin(username.value,password.value)">Login</button></td>
          <td class="col-xs-5"><label class="forgot-password">Forgot Password ?</label></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


<!--  https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg  -->
<!--  https://i.pinimg.com/originals/81/23/d4/8123d454ca0cc8f36d311cebbd5d3922.png  -->

<p>dashboard works!</p>

仪表板工作正常

屏幕截图

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tennis-Angular';

  constructor(private router: Router) {}

  // tslint:disable-next-line:typedef
  validateLogin(username: string, password: string) {
    if (username === 'mohit' && password === 'sharma') {
      // alert('Login Successful !');
      this.router.navigate(['../dashboard']);
    } else if (username === '' && password === '') {
      alert('Email and Password cannot be blank !');
    } else if (username === '') {
      alert('Email cannot be blank !');
    } else if (password === '') {
      alert('Password cannot be blank !');
    } else {
      alert('Incorrect Email or Password !');
    }
  }
}

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

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
  {path: 'dashboard', component: DashboardComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
    imports: [
        BrowserModule,
        NgbModule,
        FormsModule,
      RouterModule.forRoot(appRoutes)
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.backgroundDiv {
  background: url('https://www.usta.com/content/dam/usta/Articles/article-primary/18309_C_NY_20_USTA_ZoomBackgroundsVisitOrlando_3.jpg') no-repeat center center fixed;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 0.80;
}

.table {
  display: block;
  margin: 0 auto;
  height: auto;
  width: 25%;
  background-color: white;
  /*margin-top: 15%;*/
  text-align: center;
}

.btn-primary {
  margin-left: 20%;
  margin-top: 10%;
}

.forgot-password {
  margin-top: 8%;
}

img {
  margin: 0 auto;
  height: auto;
  position: relative;
  margin-top: 5%;
  margin-left: 50%;
  max-width: 25%;
  height: auto;
}

tbody {
  background-color: white;
}

h6 {
  margin-left: 100%;
  width: 150%;
  margin-top: 5%;
  color: mediumseagreen;
  text-shadow: mediumseagreen;
}

主页登录

注意：问题在于登录后，URL显示导航路线（路径），但页面未显示有什么解决方案吗？

您的app.component.html中没有

我建议创建一个登录组件，并将应用程序组件代码移动到登录组件，并在app.component.html上单独使用

因此，无论何时更改路由，都不会呈现以前的组件HTML。

要在其中呈现仪表板组件的附加应用程序组件。正如kishore所建议的，更好的方法是创建一个seprate组件用于登录，并仅使用router-outlet保持app.component.html文件干净。Abhijeet Raj：感谢兄弟的帮助。。祝你有美好的一天…基肖尔：谢谢兄弟的帮助…祝你有美好的一天。。。。