javascript - 通过传递数组来添加类

Question

我有这个指令，它将“selectedAnswer”类添加到我单击的所有 div 中。如果我从组件传递一个索引数组 [1,2,4]，我想添加相同的类。

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[activeOnClick]',
  // Optionally replace this both with properties marked 
  // with @HostBinding and @HostListener decorators
  host: {
    '[class.selectedAnswer]': 'clicked',
    '(click)': '_toggle()'
  }
})
export class ActiveOnClickDirective {
   @Input('activeOnClick')
   clicked = false;

   _toggle(){
     console.log('clicked');
      this.clicked= !this.clicked;
   }
}

HTML

<div activeOnClick *ngFor="let opt of options; let i=index"
 (click)="answerSelectedMultiple(i)"

如果 opt 中的键包含像 [1,2,4] 这样的数组，则索引 1,2,4 应该具有 selectedAnswer 类。

Answer 1

编辑

据我正确理解您的问题，通过单击 div 元素，应将 selectedAnswer 类添加到 div 元素。此外，应该可以预先选择其中一些选项。

参见 stackblitz 上的示例.

我向 AppComponent 类添加了一个 defaults 数组，用于定义预选选项。在你的情况1和4中；

app.component.ts

export class AppComponent  {
  defaults = [1,4];
  options = [1,2,3,4];
}

此数组绑定(bind)到指令中的新输入 default。

app.component.html

<section>
  <div [activeOnClick]="opt" [defaults]="defaults" *ngFor="let opt of options; let i=index">{{opt}}
 clicked me to toggle</div>
</section>

您的指令现在拥有确定是否应预先选择该选项的所有信息。此检查是在 ngOnInit 方法中完成的。

点击时激活.directive.ts

export class ActiveOnClickDirective implements OnInit {

  @Input() defaults: number[];
  @Input('activeOnClick') key: number;
  clicked = false;

  ngOnInit(): void {
    console.log("opt", this.defaults);

    if(this.defaults.some(x => x === this.key)){
      this.clicked=true;
    }
  }

  _toggle(){
    console.log('clicked');
    this.clicked= !this.clicked;
  }
}