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;
}
2
Answers
Just add,
target = "_blank"
in all your anchor tags. It will open a new tab.Ex :
Even though you added the click event, when it fires, you also trigger the default behaviour with
[routerLink]="['/']"
, therefore you either handle it by removing this behaviour withpreventDefault()
on the map() function, or removing the routerLink and handling the routing in the controller/method/function.