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>