页面刷新/重新加载后不显示警报（Angular v10）

Question

我正在开发一个 Angular 单页应用程序，当用户单击按钮时，页面会刷新并显示一条消息。

（打字稿）

import { Component, OnInit, OnDestroy } from '@angular/core';

export class newComponent implements OnInit, OnDestroy {
  showAlertMessage = false;

  buttonClicked(dataElement: DataModel): void {
    this.restService.postAction(dataElement, 'a new record is being inserted').subscribe();
    window.location.reload();
    this.showAlertMessage = true;
  }

(HTML)

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
  <th mat-header-cell *matHeaderCellDef> Header </th>
    <td mat-icon *matCellDef="let element">
      <button (click)="buttonClicked(element)">No Data To Report</button>
    </td>
</table>

  <div class="alert alert-primary" *ngIf="showAlertMessage" role="alert">
    This is a primary alert—check it out!
  </div>

我遇到的问题是当用户单击时，警报消息会短暂显示，然后在刷新页面时消失。如何重新加载页面，然后显示消息？目前在 buttonClicked() 方法中发生 window.location.reload() 后，该消息不显示。

Answer 1

重新加载页面会重新初始化应用程序，这意味着您的showAlertMessage = false; 将在组件加载后再次执行。

获得所需行为的一种简单方法是使用 url 参数。在按钮单击时，您修改您所在的路径以包含类似?showAlertMessage=true 的内容，以便在第二次加载时初始状态不同。 (example)

正如 Andre 所提到的，它的替代选项是使用本地存储或其他一些在应用范围之外持久化状态的方法。

您可能还需要考虑重新加载是否是正确的解决方案，因为重新初始化整个应用程序需要时间并且有点违背 SPA 的整体理念。