在 Angular 中創建喜歡/不喜歡的指令

Question

我有這樣的東西，喜歡和不喜歡按鈕，帶有很棒的字體圖標

  <ng-container *ngFor="let answer of question.answers">
    <p class="answers">{{answer.text}} <i class="fa fa-hand-o-left"  (click)="likeDislike($event,answer.id,'fa-thumbs-up')"></i></p>
  </ng-container>

還有一些function

  likeDislike(event: any, answerId: string, haveClass: string) {
    const hasClass = event.target.classList.contains(haveClass);
    if (hasClass) {
      this.renderer.removeClass(event.target, 'fa-thumbs-up');
      this.renderer.addClass(event.target, 'fa-thumbs-down');
    } else {
      this.renderer.removeClass(event.target, 'fa-thumbs-down');
      this.renderer.addClass(event.target, 'fa-thumbs-up');
    }
  }

我不認為這是一個很好的例子，有人可以幫我做一個指令嗎？

Answer 1

你可以把它放在一個組件中。 雙向綁定是一個不錯的附加功能。

現場演示

檢查這個stackblitz 演示。

像這樣稱呼它

<app-fa-like [(liked)]='liked'></app-fa-like>

組件代碼

注意：您不需要styles或__ ，它只是用於演示目的。 Font-awesome 應該在您的應用程序中處理好這一點。

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-fa-like',
  template: `
    <i 
      class='fa'
      [class.fa-thumbs-up]='liked'
      [class.fa-thumbs-down]='!liked'
      (click)='toggle()'
    >__</i>`,
  styles: [`
  .fa.fa-thumbs-up{background: green;}
  .fa.fa-thumbs-down{background: red;}
  `]
})
export class LikeComponent{
  @Input('liked') liked = true;
  @Output() likedChange: EventEmitter<boolean> = new EventEmitter();
  toggle(): void {
    this.liked = !this.liked;
    this.likedChange.emit(this.liked);
  }
}

Answer 2

由於您使用的是 angular，因此您有很多選擇。 我不確定任何一個比其他的更好或更差。 這里有一些想法

1. 使用 ngClass

2. 使用 *ngIf

3. 使用 angular 變量。 像這樣的東西可以正常工作：

    <i class="fa {{answer.faFont}}" (click)="toggleIcon(answer)"></I> toggleIcon(answer:any) { answer.faFontFlg =.answer;faFontFlg. answer.faFont = (answer?faFontFlg):'fa-thumbs-up';'fa-thumbs-down'; }