angular - 以 Angular 显示事件选项卡

Question

我正在尝试在 Angular 应用程序中显示事件选项卡。问题在于该选项卡位于子标题中，而指示哪个选项卡处于事件状态的组件位于另一个位置。我的代码会更好地解释。

子标题 HTML

<div class="col-6">
  <div class="action" > Contributions and savings </div>
  <div class="action"> Retirement strategy </div>
</div>

子 header TS

ngOnInit() {
  localStorage.getItem('step');
}

组件 HTML

<app-subheader></app-subheader>

组件 TS

localStorage.setItem('step', JSON.stringify(this.step));

现在，随着 localStorage 中的“Step”更新，每次值更改时我都需要 checkin subheader.ts，以便我可以更新选项卡以显示事件 CSS。任何想法，我都被困在这里。如何检查值何时发生变化？ NgOninit 只执行一次。

Answer 1

要制作事件选项卡逻辑，您可以这样做:

HTML:

<button (click) = "clickTab(1)" [ngClass]="{'active': step === 1}">ONE</button>
<button (click) = "clickTab(2)" [ngClass]="{'active':step === 2}">TWO</button>

TS:

 ngOnInit() {
    this.step == 1;
    localStorage.setItem('step', JSON.stringify(this.step));
  }
  clickTab(stepValue){
    this.step = stepValue;
    localStorage.setItem('step', JSON.stringify(this.step));
  }

CSS:

.active, .btn:hover {
  background-color: #666;
  color: white;
}

这是工作示例:

https://stackblitz.com/edit/angular-tqnq6b