typescript observable 在页面重新加载时不刷新

Question

当我使用按钮时，我有一个 angular 页面。 它正确地写了页面标题。 不幸的是，当使用重新加载按钮重新加载页面时，标题不会被重写。 这是 html 页面的一部分：

header 部分的一部分：

 <div class="alternate-theme" color="primary" style="height:30px;">
    <span *ngIf="titleSite$ | async as title" class="center"> {{ 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>

.ts 文件的一部分：

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(["/"]);
   }

因此，当单击按钮时，将写入正确的标题。 但如果我重新加载页面，它就是默认标题。

一切正常，除非有人点击重新加载。

我怎样才能强制使用正确的标题，？ 以前在菜单中单击的那个。

谢谢

Answer 1

每次点击刷新都会破坏变量，因此当页面加载时，初始值将始终是默认标题。

可能的解决方案：

1. 使用本地/会话存储来保存有关活动标题的信息，并在初始化时从那里读取值。 如果它没有 ecist 那么它就是默认标题。
2. 将其存储在服务器/外部某处