Pourquoi mon application recharge-t-elle la page entière à la place du composant lorsque j'ai un fichier de routage externe dans l'angle 4?

Question

Je viens de commencer à migrer une application vers Angular + Flex-Layout + Angular Material.

J'ai décidé d'avoir mon routage dans un fichier externe appelé "app-routing.module.ts". J'exporte mon module dans app.module.ts dans "imports". Ceci est mon fichier de routage:

import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { HomeComponent }  from './home/home.component' 
import { CreateMatchComponent } from './match/create-match.component' 

const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'match/new', component: CreateMatchComponent} 
]; 

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

Et voici le code HTML de l'application.component qui rend ma sortie de routeur.

<div class="containerX"> 
    <div fxLayout="row wrap"> 
     <mat-toolbar color="primary" class="mat-elevation-z4"> 
      <span>Amazing Football Stats App</span> 
      <span class="example-spacer"></span> 
      <mat-icon class="example-icon">favorite</mat-icon> 
      <mat-icon class="example-icon">delete</mat-icon> 
     </mat-toolbar> 
    </div>   
    <div fxLayout="row wrap" style="padding-top: 8px"> 
     <router-outlet></router-outlet> 
    </div> 
</div> 

Comme vous pouvez le voir, mon Component App a une div avec la barre de navigation, puis une autre div avec mon <router-outlet>.

Si je vais à localhost:4200 il charge <app-root> qui contient le <nav-bar> et la <router-outlet> et depuis la « route » est vide, il me redirige vers «/home ».

Maintenant, mon problème est le suivant: Si je change l'URL: localhost:4200/match/new (Dans le navigateur, dans la barre d'URL) appuyez sur Entrée, je vous attendre à quitter le <nav-bar> et seulement mettre à jour le <router-outlet> même fait marche arrière. Si je suis sur une page différente et que je change l'URL en "/ home" (ou même en la laissant vide) il devrait garder la barre de navigation et seulement mettre à jour la sortie du routeur. Désolé si c'est une question stupide que je viens de commencer avec le routage angulaire. Qu'est-ce que je fais mal?

Answer 1

Lorsque vous modifiez l'emplacement du navigateur, le navigateur gère cette modification et envoie une nouvelle requête HTTP à votre serveur. C'est pourquoi il recharge toute la page.

Pour ne changer le composant chargé dans le <router-outlet>, vous avez besoin du routeur angulaire pour gérer le changement, ce qui se fait à l'aide de la directive routerLink:

<a routerLink="match/new" routerLinkActive="active">Create Match</a> 

ou par programmation avec un appel à router.navigate:

constructor(private router: Router) {} 
... 
goToCreateMatch() { 
    this.router.navigate(['/match/new']); 
} 

Voici un lien vers la documentation angulaire, pour plus d'informations:

https://angular.io/guide/router#router-links

https://angular.io/api/router/Router#navigate