Question

我正在使用Ionic3 + Angular构建一个混合应用程序，并且我坚持这个：

我有一个以段（A和B）分隔的表单，如下所示：

<form [formGroup]="testForm">     
  <ion-segment formControlName="segmentTest" [(ngModel)]="segmentTest">
    <ion-segment-button value="A">
      Segment A
    </ion-segment-button>
    <ion-segment-button value="B">
      Segment B
    </ion-segment-button>    
  </ion-segment> 

  <div [ngSwitch]="segmentTest">        
    <ion-list *ngSwitchCase="'A'">
      <ion-item>
        <ion-label  floating>Input A</ion-label>
        <ion-input type="number"></ion-input>
      </ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'B'">
      <ion-item>
        <ion-label  floating>Input B</ion-label>
        <ion-input type="number"></ion-input>
      </ion-item>
    </ion-list>    
  </div>
</form>

问题是：当我在输入A（段A）中插入一些数据然后我更改为段B时，当我返回到段A时，其输入的数据将丢失/空白。

我应该怎么做才能修复它？我可以使用另一个组件来获得与Segment相同的结果吗？

Answer 1

问题是像*ngSwitch和*ngFor这样的结构指令会添加和删除其权限范围内的组件。删除组件后，它们在绑定中保存的任何数据也将被删除。当元素被添加回Dom时，因为switch case再次匹配，组件再次被实例化，旧组件很久就被丢弃了。

因此，要切换这些部分，您需要有条件地显示和隐藏元素，而不是使用结构指令。

以下是一个例子：

<ion-list [hidden]="segmentTest !== 'B'">
  <ion-item>
    <ion-label floating>Input A</ion-label>
    <ion-input type="number"></ion-input>
  </ion-item>
</ion-list>
<ion-list [hidden]="segmentTest !== 'A'">
  <ion-item>
    <ion-label  floating>Input B</ion-label>
    <ion-input type="number"></ion-input>
  </ion-item>
</ion-list>

这样可行，但我不喜欢它，因为我们需要否定所有条件，这些条件可能更复杂，而且阅读起来并不那么清楚。因此，让我们创建自己的指令。

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({selector: '[showWhen]'}) export default class {
  constructor(elementRef: ElementRef) {
    this.ref = elementRef;
  }

  @Input() set showWhen(value) {
    this.ref.nativeElement.hidden = !value;
  }
  get showWhen() {
    return !this.ref.nativeElement.hidden;
  }

  // intentional framework stupid weak typing defeated.
  ref: {nativeElement: Element};
}

然后我们可以写

<ion-list [showWhen]="segmentTest === 'A'">
  <ion-item>
    <ion-label floating>Input A</ion-label>
    <ion-input type="number"></ion-input>
  </ion-item>
</ion-list>

使用<ion-segment>，更改段时，表单中插入的数据将丢失

1 个答案: