离子组件不保存数据

Question

我已经开发了多个组件，我想在我的页面中使用。 假设组件1，组件2和组件3

当我加载我的页面时，我希望一次只有一个组件处于活动状态，所以我在 page.html

中编写了这段代码

<ion-content padding class="bgColor">


    <div *ngIf="selectdPageNo == '1'">
        <component1></component1>
    </div> 

    <div *ngIf="selectdPageNo == '2'">
        <component2></component2> 
    </div>

    <div *ngIf="selectdPageNo == '3'">
        <component3></component3>
    </div>

</ion-content>

它工作正常（在每个组件上，输入字段很少，并且存在下一个按钮。当我单击下一个按钮时，它会加载下一个组件。）

问题是当我加载新组件并返回到以前填写的以前的组件数据时丢失了。我如何保存我的数据？ 还是我做错了什么？

请提前帮助和感谢！

Answer 1

你可以像下面的代码那样做。

<ion-content padding class="bgColor">
    <div [hidden]="selectdPageNo == '1'">
        <component1></component1>
    </div> 

    <div [hidden]="selectdPageNo == '2'">
        <component2></component2> 
    </div>

    <div [hidden]="selectdPageNo == '3'">
        <component3></component3>
    </div>

</ion-content>

您必须使用[hidden] 而不是ngIf，因为 hidden 只是在 dom 中隐藏 html，而 ngIf 从 dom 中删除 html，因此当您切换到下一页时，如果删除了上一个 html。