html - 无法导航到角度 10 中的其他组件页面
问题描述
我正在构建一个名为:Tennis Club Management using Angular 10 的示例项目。在这个项目中,我有应用程序组件和仪表板组件。在app.component.html中,我创建了登录,它需要 2 个输入用户名和密码并包含登录按钮。现在点击登录按钮,它应该验证字段并将其导航到dashboard.html。
下面是代码文件和截图
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 -->
app.component.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 !');
}
}
}
app.module.ts
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 { }
app.component.css
.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;
}
仪表板.component.html
<p>dashboard works!</p>
截图
首页登录
注意:问题是登录后,URL显示导航路线(路径),但页面未显示。请问有什么解决办法吗?
解决方案
您的 app.component.html中没有<router-outlet></router-outlet>
。
我建议创建一个登录组件并将您的应用程序组件代码移动到登录组件并单独放在您的 app.component.html 上。
因此,每当您更改路由时,您以前的组件 HTML 都不会呈现。
推荐阅读
- awk - 如何使用 grep 和 awk 提取特定值
- debugging - 在刷新 Firefox 时保留断点
- amazon-web-services - 在aws中使用https for flask api 无需购买域名
- php - 错误 - 未为突变配置架构,尽管架构中包含突变
- android - Android Safetynet Attestation 内置重试逻辑
- scala - 不参照原作,为高等类型召唤辅助
- firebase - firebase clearAllNotifications() 在 ionic 3 中不起作用
- java - 关于返回参数的java mapper ibatis错误
- xamarin.android - 为什么 Xamarin Android 中的 BiometricPrompt API 不包含 onAuthenticationError 回调
- css - 不考虑大小的媒体查询