Navigation

le routeur utilise maintenant les fragments (#)
utilisation de routerLink au lieu de méthodes perso

src/app/app.component.html

@@ -16,12 +16,12 @@
 
     <!-- Collapsible content -->
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item" *ngFor="let c of calculators">
+      <ul id="navbar" class="navbar-nav mr-auto">
+        <li class="nav-item calculator-tab" *ngFor="let c of calculators">
           <a class="nav-link waves-light {{getHighlightClass(c.uid)}}" mdbRippleRadius [routerLink]="['/calculator/',c.uid]">{{ c.title }}</a>
         </li>
-        <li class="nav-item">
-            <i id="new-calculator" class="fa fa-plus-square fa-2x fa-inverse" style='vertical-align: middle' (click)='newCalc()'></i>
+        <li class="nav-item" id="add-calculator-tab">
+            <i id="new-calculator" class="fa fa-plus-square fa-2x fa-inverse" style='vertical-align: middle' routerLink="/list" (click)='closeNav()'></i>
         </li>
       </ul>
     </div>
@@ -36,10 +36,10 @@
       <div id="mySidenav" class="sidenav">
         <!-- ATTENTION ! pas de href="#" sous peine de rechargement de la page et réinitialisation de l'appli -->
         <a class="closebtn" (click)="closeNav()">×</a>
-        <a (click)="newCalc()">{{ uitextSidenavNewCalc }}</a>
+        <a routerLink="/list" (click)="closeNav()">{{ uitextSidenavNewCalc }}</a>
         <a (click)="loadSession()">{{ uitextSidenavLoadSession }}</a>
-        <a (click)="params()">{{ uitextSidenavParams }}</a>
-        <a target="_blank" href="assets/docs-fr/">{{ uitextSidenavHelp }}</a>
+        <a routerLink="/setup" (click)="closeNav()">{{ uitextSidenavParams }}</a>
+        <a target="_blank" href="assets/docs-fr/" (click)="closeNav()">{{ uitextSidenavHelp }}</a>
         <div class="hyd_fillvertical"></div>
         <div class="hyd_version">
           JaLHyd version: {{ getDateRevision()[0] }}<br/>

src/app/app.component.ts

@@ -26,8 +26,6 @@ import { nghydDateRev } from "../date_revision";
   providers: [ErrorService]
 })
 export class AppComponent implements OnInit, OnDestroy, Observer {
-  private _displayErrorDialog = false;
-
   /**
    * liste des calculettes. Forme des objets :
    * "title": nom de la calculette
@@ -332,11 +330,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     document.getElementById("mySidenav").style.width = "0";
   }
 
-  public newCalc() {
-    this.closeNav();
-    this.toList();
-  }
-
   public loadSession() {
     this.closeNav();
 
@@ -350,11 +343,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     }).catch(err => { });
   }
 
-  public params() {
-    this.closeNav();
-    this.router.navigate(["/setup"]);
-  }
-
   public getDateRevision(): string[] {
     const dr: string[] = [jalhydDateRev, nghydDateRev];
     return dr;

src/app/app.module.ts

@@ -62,8 +62,10 @@ const appRoutes: Routes = [
   imports: [
     RouterModule.forRoot(
       appRoutes,
-      // { enableTracing: true } // <-- debugging purposes only
-      { enableTracing: false }
+      {
+        useHash: true, // prevents reloading whole app when typing url in browser's navigation bar
+        enableTracing: false // debugging purposes only
+      }
     ),
     BrowserModule,
     NgxMdModule.forRoot(),