прежде всего большое спасибо, что нашли время, чтобы прочитать эту консультацию. Я новичок в разработке angular, мне было интересно узнать об этой технологии и не использовать фреймворки, которые я использовал в течение некоторого времени. В настоящее время я разрабатываю очень простое веб-приложение, проблема у меня заключается в том, что при нажатии на ссылку «Войти» абсолютно ничего не происходит. Это также не показывает мне сообщение об ошибке. Я копирую код, который у меня сейчас есть. Я благодарю вас за помощь в решении этой проблемы.
app.component. html
<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
<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 js-scroll-trigger" href="#">Inicio</a>
</li>
....
<li class="nav-item">
<!-- <a class="nav-link" [routerLink]="['/login']">Iniciar Sesión</a> -->
<a class="nav-link" routerLink="/login">Iniciar Sesión</a>
</li>
</ul>
</div>
</nav>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
// used to create fake backend
import { fakeBackendProvider } from './_helpers';
import { appRoutingModule } from './app.routing';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
import { AlertComponent } from './_components';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
appRoutingModule
],
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
AboutComponent,
TeamComponent,
ServiceProvidedComponent,
ContactComponent,
RegisterComponent,
AlertComponent
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
// provider used to create fake backend
fakeBackendProvider
],
bootstrap: [AppComponent]
})
export class AppModule { };
app. components.ts
import { Component } from '@angular/core';
import { Router} from '@angular/router';
import { AuthenticationService } from './_services';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
currentUser: any;
constructor(private router: Router, private authenticationService: AuthenticationService) {
this.router.errorHandler = (error: any) => {
this.router.navigate(['404']); // or redirect to default route
};
this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
}
logout() {
this.authenticationService.logout();
this.router.navigate(['/login']);
}
}
app.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
import { AuthGuard } from './_helpers';
const routes: Routes = [
// { path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
// otherwise redirect to home
// { path: '**', redirectTo: '' }
];
export const appRoutingModule = RouterModule.forRoot(routes);