Angular 2 ng类函数

Question

您好，我正在创建一个 wizard/step 组件。我如何使用基于->的ngClass到returncssclasses?

我有 5 个步骤，假设用户在第 3 步。前面的所有步骤应该 return a css class 命名为 active 和当前步骤（第 3 步）returns css class active 和第 3 步之后的所有步骤应该 return inactive css class.

<div class="step actived">
                    <span [ngClass]="displayActiveness()">Step 1
                    </span>
                </div>
                <div class="divider"></div>
                <div class="step" [ngClass]="displayActiveness()">
                    <span>Step 2
                    </span>
                </div>
.....

TS:

displayActiveness(status) {
        if (this.statusSelected === 'step3') {
            return 'active';
        } else if (
        this.statusSelected === 'step4' || this.statusSelected === 'step5'){
            return 'inactive';
        }
        else if (
            this.statusSelected === 'step1' || this.statusSelected === 'step2'){
                return 'actived';
            }
    }

我卡住了。有人可以帮我解决这个问题吗？提前致谢。

Answer 1

为什么不把你的statusSelected设置成number，方便管理呢？

TS:

statusSelected: number = 1; //step 1 by default
....
displayActiveness(status) {
    if (this.statusSelected === status) {
      return 'active';
    }
    if (this.statusSelected > status) {
      return 'actived';
    }
    if (this.statusSelected < status) {
      return 'inactive';
    }
}

HTMl:

<div class="step"  [ngClass]="displayActiveness(1)">
    <span>Step 1</span>
</div>
<div class="divider"></div>
<div class="step" [ngClass]="displayActiveness(2)">
    <span>Step 2</span>
</div>

有了这个，下一步只能是：

nextStep() {
    this.statusSelected++;
}

Answer 2

或者，您可以遍历循环并像这样将活动 class 设置为您的步骤 -

<div class="step" [ngClass]='{"active" : activeClassList[0]}'>
  <span>Step 0</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[1]}'>
  <span>Step 1</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[2]}'>
  <span>Step 2</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[3]}'>
  <span>Step 3</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[4]}'>
  <span>Step 4</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[5]}'>
  <span>Step 5</span>
</div>

settingActiveClass() {
     for(let i=0; i < this.userLevel; i++) {
       this.activeClassList[i] = 'active';
     }
   }

working example

Answer 3

勾选以下内容example。

component.html

<ul>
    <li *ngFor="let step of steps; let i = index">
        <span class="step" [ngClass]="displayActiveness(i)">
            {{step}} 
        </span>
        <button (click)="chooseStep(i)">Click me</button>
    </li>
</ul>

component.ts

export class AppComponent  {
  name = 'Angular 6';
  currentStep = 0;
  steps = ['step1', 'step2', 'step3', 'step4', 'step5'];

  chooseStep(index) {
    this.currentStep = index;
  }

  displayActiveness(index) {
    console.log('displayActiveness called')
    if (index > this.currentStep) {
      return 'inactive';
    } else {
      return 'active';
    }
  }

}

当您检查控制台时，您会看到当您单击 Click me 按钮时 displayActiveness 方法被调用 10 次。这是因为 angular 更改检测机制。当发生某些事情触发更改检测时，angular 将遍历您的模板并调用所有内容。因此，通常在模板中调用函数不是一个好主意。但是，假设您绝对需要这样做。然后，你就可以使用管道了。

检查这一秒example

在此示例中，我将 displayActiveness 方法的逻辑移至管道，以便它仅在输入更改时执行。它在您的示例中可能没有太大差异，但请考虑一个更复杂的方法。您不希望 angular 每次用户执行某些操作时都调用您的复杂方法。

active.pipe.ts

@Pipe({
  name: 'activePipe'
})
export class ActivePipe implements PipeTransform {
  transform(index, currentStep) {
    console.log('pipe called')
    if (index > currentStep) {
      return 'inactive';
    } else {
      return 'active';
    }
  }
}

正在将ngClass更改为关注

<span class="step" [ngClass]="i | activePipe: currentStep">
    {{step}} 
</span>

Angular 2 ng类函数

Angular 2 ngClass function

css

ng-class

angular

working example