How can I preserve page state in Angular using HTML?

Each of the following links is responsible for displaying a different page using RouterModule.

When Clicking on the last one (click)="map()" the whole website is reloaded, is there a possibility to preserve the page state and make each link to act as a "tab"?

I will provide additional code if necessary

Links:

<a class="a flex-item-b" (click)="Contact()" [ngClass]="{'butin':!conta, 'buttout':conta}" routerLink="Contact">{{'nav.contacts'|translate}}</a>
<a class="a flex-item-a" (click)="Partners()" routerLink="Partners" mat-menu-item [ngClass]="{'butin':!partners, 'buttout':partners}">{{'information.partners'|translate}}</a>
<a class="a flex-item-a" (click)="About()" routerLink="About" mat-menu-item [ngClass]="{'butin':!aboutUs, 'buttout':aboutUs}">{{'information.About'|translate}}</a>
<a class="a flex-item-a" (click)="Center()" routerLink="Center" mat-menu-item [ngClass]="{'butin':!theCenter, 'buttout':theCenter}">{{'information.Center'|translate}}</a>
<a class="a flex-item-c" (click)="map()" [ngClass]="{'butin':!map, 'buttout':map}" [routerLink]="['/']" [queryParamsHandling]="'preserve'">{{ 'nav.map' | translate }}</a>

Router:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MapsComponent } from './maps/maps.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { TheCenterComponent } from './about/the-center/the-center.component';
import { PartnersComponent } from './about/partners/partners.component';
import { AbouUsComponent } from './about/abou-us/abou-us.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { TutorialsComponent } from './tutorials/tutorials.component';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot([
    { path: '', component: MapsComponent },
    { path: 'Dev', component: MapsComponent },
    { path: 'map', component: MapsComponent },
    { path: 'Contact', component: ContactUsComponent },
    { path: 'Center', component: TheCenterComponent },
    { path: "Partners", component: PartnersComponent },
    { path: "About", component: AbouUsComponent },
    { path: "Dev/Tutorial", component: TutorialsComponent },
    { path: '**', component: PageNotFoundComponent }
  ])],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Function:

map() {
this.navDesign = true;
this.myRef.current.contentWindow.execCommand('map')
this.showSo = false; this.showKi = false; this.showPe = false; this.showLo = false;             
this.map = true;
this.conta = false;
this.aboutUs = false; this.partners = false; this.theCenter = false;
}

EDIT (using preventDefault())

Link:

<a class="a flex-item-c" (click)="mapF($event)" [ngClass]="{'butin':!map, 'buttout':map}" routerLink="/"> {{'nav.map'|translate}}</a>

Function:

mapF(event) {
event.preventDefault(); // Prevents the default behavior of the  
//click event
this.navDesign = true;
this.myRef.current.contentWindow.execCommand('map')
this.showSo = false; this.showKi = false; this.showPe = false; 
this.showLo = false; this.map = true;
this.conta = false;
this.aboutUs = false; this.partners = false; this.theCenter = 
false;
}