组件上的 Angular *ngIf 指令不保存值（Ionic 3）

Posted 2023-03-13

【中文标题】组件上的 Angular *ngIf 指令不保存值（Ionic 3）

【英文标题】：Angular *ngIf directive on component doesn't save value (Ionic 3)

【发布时间】：2018-06-21 04:26:26

【问题描述】：

我在 Ionic 3 上创建了角度组件。 我使用 *ngIf 指令创建了几个 div 选项卡。 现在我可以使用按钮在标签之间切换..

但是，当我导航到包含该组件的主 html 页面的其他部分时，*ngIf 指令似乎失去了其当前值。它默认返回到其原始选项卡。 这对我来说是个问题。我正在尝试使 ngIf 指令选项卡停留在它们所在的位置。 我怎样才能做到这一点？我应该将 ngIf 的值存储到本地存储吗？还有其他方法吗？

只要 ngIf 没有嵌套在组件中，主 HTML 页面似乎就会存储 ngIf 指令值。

提前致谢，

【问题讨论】：

没有找到解决方案...请帮忙！

【参考方案1】：

您可以创建一个服务来保存哪个选项卡处于活动状态的状态变量

import  Injectable  from '@angular/core';

@Injectable()
export class TabService 


  tabState: number = 0;

  constructor()  


  setTab(index: number) 
    this.tabState = index;
  

  getTab() 
    return this.tabState;
  

然后在您的组件中，注入服务，并在初始化时，获取选项卡

  currentValue = 0;

  constructor(private tabService: TabService ) 

  ngOnInit() 
    this.currentValue = this.tabService.getTab();
  

  currentValueChange(currentValue)
    this.currentValue = currentValue;
    this.tabService.currentValueChange(currentValue);
  

注意，不要忘记将服务作为提供者注入

【讨论】：

您好，感谢您的回复！我试过了，还是不行。

所以，我的主 HTML 页面有两个选项卡。并且嵌套在其中一个选项卡内的组件有四个选项卡。我创建了服务并正确导入但没有运气......你可以向我展示一个简单的 github 示例吗？非常感谢！

具体来说，您提供的示例正在运行，但 ngOnInit 似乎正在尝试在我的应用程序初始启动时获取 tabState，并且在初始阶段，没有加载到 tabState 的数值，因此它不显示任何事物。以后如何加载 tabState 数值？

服务中的值也可以初始化。

谢谢，我在这里回复了.. 是的，也许我可以在服务提供商上使用 ngOnInit！