时间戳

首页 > 解决方案 > 在组件之间交换时如何防止表单数据丢失（不刷新）？

angular - 在组件之间交换时如何防止表单数据丢失（不刷新）？

问题描述

我在 2 个组件（都包含表单）之间交换，但我想保留用户在表单中写入的数据（不提交），即使在交换组件之后也是如此。它通过在选项卡之间交换来处理简单的 html

我正在尝试根据父组件中名为“值”的变量交换组件。

父组件html：

  <ul>
 <li class="nav-item"><a (click)="changeValue(1)">Dine In</a></li>
  <li class="nav-item"><a(click)="changeValue(2)">Delivery</a></li>
  </ul>
 </div>
 <app-dine *ngIf="value == 1"></app-dine>
 <app-delivery *ngIf="value == 2"></app-delivery>

在父 ts 我做了一个简单的 cahngevalue 函数：

 changeValue(x){
    this.value=x;
}

子组件只是表单：例如：

<form>
<input type="text"> //if the user write anything here i want to swap components to the other child without losing data
</form>

请帮忙。谢谢！

标签： angulartypescript

解决方案

它通过使用

[hidden]="value === x"

在组件条件下而不是交换它。

推荐阅读