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

Question

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

Answer 1

您可以使用 NgbTabset 的 destroyOnHide 属性.用法:

<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>