如何使用*ngif隐藏和显示两个子组件，但不丢失Angular 4中的数据

嗨，有没有办法在*ngIf显示和隐藏时保留我的子组件上的数据

我不能使用[隐藏]属性

<div id="parentcomponent">
  <child1 *ngif="child1"></child1>
<child2 *ngif="child2"></child2>
</div>

child1.html

<div>value need to retain on again click<div>

需要保留的值再次单击

child2.html

<div>some value<div>

一些值

最佳实践是创建一个服务来存储数据。该服务将在组件重新创建后继续使用，并允许您在组件之间共享数据

您没有共享要保留的数据类型，因此我将用一个字符串显示一个示例

首先，编写服务：

@可注入({
providedIn:'根'
})
导出类RetainDataService{
public myString='初始值'；
}

然后在

Child1

中注入并使用此服务：

@组件({
选择器：“第一个孩子”，
模板：“{value}}”，
样式：['']
})
导出类child1组件{
值：字符串；
建造商（私人聘请人：RetainDataService）{
this.value=reserver.myString；
}
}

更改

Child1

中的值时，请确保更新服务上的值

如果您使用发出值并将其作为可观察对象公开的

主题

，您将获得额外的积分，但这个简单的示例也适用

作为旁注，

[hidden]

通常是错误的解决方案，因为它会在DOM中留下未使用的元素，并影响性能

编辑

---

我应该补充一点，如果您的数据实际上是在父组件中维护的，那么您不需要服务。只需将

@Input（）

添加到属性声明中，并在父组件标记中使用绑定。上面所示的服务策略更灵活，可用性更广。

最佳做法是创建一个服务来存储数据。该服务将在组件重新创建后继续使用，并允许您在组件之间共享数据

您没有共享要保留的数据类型，因此我将用一个字符串显示一个示例

首先，编写服务：

@可注入({
providedIn:'根'
})
导出类RetainDataService{
public myString='初始值'；
}

然后在

Child1

中注入并使用此服务：

@组件({
选择器：“第一个孩子”，
模板：“{value}}”，
样式：['']
})
导出类child1组件{
值：字符串；
建造商（私人聘请人：RetainDataService）{
this.value=reserver.myString；
}
}

更改

Child1

中的值时，请确保更新服务上的值

如果您使用发出值并将其作为可观察对象公开的

主题

，您将获得额外的积分，但这个简单的示例也适用

作为旁注，

[hidden]

通常是错误的解决方案，因为它会在DOM中留下未使用的元素，并影响性能

编辑

---

我应该补充一点，如果您的数据实际上是在父组件中维护的，那么您不需要服务。只需将

@Input（）

添加到属性声明中，并在父组件标记中使用绑定。上面所示的服务策略更灵活，可用性也更广。

您可以将数据存储在

行为子对象中，并在组件再次渲染时使用它来恢复数据。我相信您可以做的最简单的事情是，您可以为每个子
child1激活
和
showChild1
设置两个标志。onclick（）{showChild1=true；child1WasActivated=true；showChild2=false；}。然后组合*ngIf=“child1WasActivated”[隐藏]=“showChild2”。因此，如果停用，您的组件将被隐藏，但将“惰性地”激活您可以将数据存储在
行为子对象中，并在组件再次渲染时使用它还原数据。我相信您可以做的最简单的事情是，您可以为每个子
child1激活的
和
showChild1
设置两个标志。onclick（）{showChild1=true；child1WasActivated=true；showChild2=false；}。然后组合*ngIf=“child1WasActivated”[隐藏]=“showChild2”。因此，如果停用，您的组件将被隐藏，但将被“延迟”激活Hi，但我如何保留输入或下拉列表的数据将是我在第一个子组件中的数据，将是get Retain这就是服务的用途。在
ngondestory
中将值保存到服务中，并在
ngonit
上的构造函数中加载值（如图所示）。您可以对任意数量的字段执行此操作，不管它们是如何更改的。您好，但是我如何保存输入或下拉列表的数据，将取决于我在第一个子组件中的数据，这将是get Retain，这就是服务的用途。在
ngondestory
中将值保存到服务中，并在
ngonit
上的构造函数中加载值（如图所示）。您可以对任意数量的字段执行此操作，无论它们如何更改。
<div>some value<div>