Angular 4+在切换选项卡时保留输入值

Question

我使用ng-bootstrap创建3个选项卡，每个选项卡是共同父组件内的单独组件。每个子组件包含多个文本输入，当我在子组件之间切换时，输入文本值消失。切换标签时如何保留所有输入值？

Answer 1

您可以使用destroyOnHide的NgbTabset属性。用法：

<ngb-tabset [destroyOnHide]="false">
    <ngb-tab>
        <ng-template ngbTabTitle>
            <div>Title 1</div>
        </ng-template>
        <ng-template ngbTabContent>
            <!-- Component One-->
        </ng-template>
    </ngb-tab>
    <ngb-tab>
        <ng-template ngbTabTitle>
            <div>Title 2</div>
        </ng-template>
        <ng-template ngbTabContent>
            <!-- Component two-->
        </ng-template>
    </ngb-tab>
<ngb-tabset>

Answer 2

您可以构建服务以保留值。

像这样简单的东西会做：

import { Injectable } from '@angular/core';

@Injectable()
export class InputService {
  lastName: string;
  firstName: string;

  constructor() { }

}

只需将此服务注入三个选项卡组件中的每一个。然后，他们可以将值设置到服务中并从服务中读取值。

Answer 3

您需要在某处存储值，当您更改Tab时，DOM会刷新，因此您输入了输入。

创建一个对象来保存数据并在路径参数中传递对象以始终保留它。

或者，您可以使用localStorage保存对象并在ngInit方法上获取它。

Answer 4

您可以将值存储在服务中，然后以ngOnInit()方法读回，或者您可以使用localStorage，如here所示，以ngOnInit()方法读回结果，这是您在ngOnDestroy()方法中保存的结果。这里有必要对这些lifecycle方法进行一些了解。