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

Question

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

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

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

提前致谢，

Answer 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);
  }

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