Question

导航到其他路线时如何保存数据？我有4条路线。当我导航到路线1时，我看到了一些数据。如果我导航到路线2然后导航回路线1，我看不到以前的数据。

const appRoutes: Routes = [
  { path: 'stock', component: StockComponent },
  { path: 'cuit', component: CuitComponent },
  { path: 'pendientes', component: PendientesComponent },
  { path: 'cargas', component: CargasComponent },
  { path: '', redirectTo: '/stock', pathMatch: 'full' }
]

我第一次看到所有数据。导航后，我只看到form和thead。

<form class="form-inline addItem">
  <input class="form-control mr-sm-2" type="text" placeholder="Nombre" #addNombre>
  <input class="form-control mr-sm-2" type="number" placeholder="Stock" #addStock>
  <button class="btn btn-outline-success my-2 my-sm-0" type="button" (click)="agregar(addNombre.value, addStock.value)">Agregar</button>
</form>
<table class="table">
  <thead>
    <th>id</th>
    <th>Nombre</th>
    <th>Cantidad</th>
  </thead>
  <tbody>
    <tr *ngFor="let item of data" (dblclick)="CambiarModificacion(item)">
      <ng-container *ngIf="item.id != modificando.id">
        <td>{{item.id}}</td>
        <td>{{item.nombre}}</td>
        <td>{{item.cantidad}}</td>
      </ng-container>
      <ng-container *ngIf="item.id == modificando.id">
        <td>{{item.id}}</td>
        <td><input type="text" class="input-group-addon" value="{{item.nombre}}" [(ngModel)]="item.nombre"></td>
        <td><input type="text" class="input-group-addon" value="{{item.cantidad}}" [(ngModel)]="item.cantidad"></td>
        <td><button type="button" name="button" class="btn btn-primary" (click)="modificar(item)">Ok</button></td>
      </ng-container>
    </tr>
  </tbody>
</table>

Answer 1

您应该将数据存储在服务中而不是存储在组件属性中。

Answer 2

如何创建服务类包含在官方教程中：https://angular.io/tutorial/toh-pt4

只需在服务类中添加一个值，例如 formDataStorage: any。您必须将服务注入到组件中，然后编辑 formDataStorage 函数中的 modificar() 值。

将该服务也注入到路由 2 页面中，获取 formDataStorage 将让您检索您的值。

如何在切换路由时保留数据（Angular）

2 个答案: