Question

我已经开发了多个组件，并且希望在我的页面中使用。假设component1，component2和component3

当我加载页面时，我一次只希望一个组件处于活动状态，因此我在 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和ng中隐藏html如果从dom中删除html，则当您切换到下一页时，如果上一个html被删除，则将其切换到下一页。

离子组件未保存数据

1 个答案: