I have an angular page that works when I use the button. It writes the page title correctly. Unfortunately, when the page is reloaded with the reload button, the title is not rewritten. Here's a part of the html page:

a part of the header portion:

 <div  color="primary" style="height:30px;">
    <span *ngIf="titleSite$ | async as title" > {{ title }} </span>
 </div>
 <mat-menu #menu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item (click)="navigateMenu('home')">
        <mat-icon color="accent">home</mat-icon>
        <span>Home page</span>
      </button>
  </mat-menu>

a portion of the .ts file :

export class TopMenuComponent implements OnInit {
  public titleSite$: Observable<string>;
}

navigateMenu(tag) {
   this.titleSite$ = this.translate.stream('Sitetitle0'); // Default title
   this.initialTag$ = tag;
   if (tag === "home") {
     this.titleSite$ = this.translate.stream('Sitetitle1');
     this.router.navigate(["/"]);
   }

So when The button is clicked the right title is written. But If I reload the page it's the default title.

Everything is working fine, unless someone click the reload.

How can I force to use the right title, ? the one that was previously click in the menu.

Thanks

CodePudding user response：

Each time you hit refresh you are destroying the variables, so when the page is loaded inital value will allways be default title.

Possible solutions:

1. Use local/session storage to keep information about active title, and on init read the value from there. If it doesn't ecist then it is default title.
2. Store it on server/somewhere externaly