Question

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

子标题HTML

import sys
import re

# validate command-line arguments
if (len(sys.argv) != 2): raise ValueError('usage: parse <script>')

# parse the variable name and its value
def handle_assignment(index, source):
    # TODO: handle quotations, brackets, braces, and parenthesis values
    variable = re.search(r'[\S\D]([\w]+)\s+?=\s+?(none|true|false|[-+]?\d+\.?\d+|[\'\"].*[\'\"])', source[index:])
    if variable is not None:
        print('{}={}'.format(variable.group(1), variable.group(2)))
        index += source[index:].index(variable.group(2))
    return index

# parse through the source element by element
with open(sys.argv[1]) as file:
    source = file.read()
    index = 0
    while index < len(source):
        # checks if the line matches a variable assignment statement
        if re.match(r'[\S\D][\w]+\s+?=', source[index:]):
            index = handle_assignment(index, source)
        index += 1

子标头TS

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

组件HTML

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

组件TS

<app-subheader></app-subheader>

现在，由于在本地存储中更新了“步骤”，因此每次值更改时我都需要检入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

以角度显示活动标签

1 个答案: