В моем приложении Angular (v7) нажатие на ссылку маршрутизатора не загружает соответствующий компонент, хотя URL-адрес изменяется в адресной строке браузера.
После перезагрузки страницы, нажав на кнопку обновления в браузере, ссылки роутера начинают работать, как и ожидалось. Я подтвердил поведение в Google Chrome и IE.
Не могли бы вы показать мне, что я делаю неправильно и где? Я поделился соответствующими частями моего кода ниже.
Модуль приложения и настройка маршрутизатора
import {
RouterModule,
Routes
} from "@angular/router";
...
const appRoutes: Routes = [{
path: 'login',
component: LoginComponent
},
{
path: 'bookings',
component: BookingsComponent,
canActivate: [AuthGuard]},
{
path: 'rates',
component: RatesComponent,
canActivate: [AuthGuard]},
{
path: '',
redirectTo: '/bookings',
pathMatch: 'full',
canActivate: [AuthGuard]
},
{
path: '**',
component: PageNotFoundComponent
},
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, {
enableTracing: false
}),
BrowserModule,
...
]
})
export class AppModule {}
Ссылки маршрутизатора в шаблоне HTML
<a class="side-nav-link" routerLink="/rates" routerLinkActive="active">Rates</a>
<a class="side-nav-link" routerLink="/bookings" routerLinkActive="active">Bookings</a>
Auth Guard, если это актуально
@Injectable({
providedIn: "root"
})
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authService:AuthService) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.authService.loggedIn) {
return true;
}
this.router.navigate( ['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}