当在angular 4中有一个外部路由文件时，为什么我的应用程序重新加载整个页面而不是组件？

Question

I just started migrating an app to Angular + Flex-Layout + Angular Material.

I decided to have my routing in an external file called "app-routing.module.ts". I export my module in in the app.module.ts within "imports". This is my routing file:

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 {}

And here is the HTML from the app.component that renders my router outlet.

<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>

As you can see, my App Component has a div with the navigation bar and then another div with my <router-outlet> .

If I go to localhost:4200 it loads <app-root> which contains the <nav-bar> and the <router-outlet> and since the "route" is empty it redirects me to "/home".

Now my problem is this: If I change the URL to: localhost:4200/match/new (In the browser, in the URL bar) hit enter, I would expect to leave the <nav-bar> and only update the <router-outlet> and the same goes backwards.

If I am on a different page and I change the URL to "/home" (or even leaving it empty) it should keep the nav bar and only update the router outlet.

Sorry if this is a stupid question I just started with angular routing. What am I doing wrong?

Answer 1

When you change the browser location, the browser is handling that change and will send a new HTTP request to your server. That's why it reloads the whole page.

In order to only change the component loaded in the <router-outlet> , you need Angular's router to handle the change, which is done by using the routerLink directive:

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

or programmatically with a call to router.navigate :

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

Here's a link to angular's documentation, for more info:

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

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