通过传递数组添加 Class

Question

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

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 class.

Answer 1

编辑

我对你的问题的理解是正确的，通过单击 div 元素，应该将 selectedAnswer class 添加到 div 元素。此外，应该可以预选其中一些选项。

参见 stackblitz 上的示例。

我在 AppComponent class 中添加了一个 defaults 数组，它定义了预选选项。在您的情况 1 和 4 中；

app.component.ts

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

此数组绑定到指令中的新输入 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 方法中完成。

活动-click.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;
  }
}

通过传递数组添加 Class

add Class by passing an array

javascript

angular

angular5