Question

我有这个指令，添加＆＃39; selectedAnswer＆＃39;我点击的所有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上的示例。

我在defaults类中添加了一个AppComponent数组，用于定义预先选择的选项。在你的情况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

1 个答案: