Codility 喜欢按钮 angular

Question

嗨，我对广场上的可塑性练习有疑问，我正在尝试做 2 天的事情，但没有人有解决方案

使用 Angular (v4) 构建一个点赞按钮组件。将点赞按钮组件导出为“LikeButtonComponent”（导出 class LikeButtonComponent）。

要求：

应该有一个赞按钮：点赞按钮的内容应采用以下格式：“点赞 | 100”，其中 100 为点赞总数。它应该有一个“点赞按钮”class。用“likes-counter”class 包装一个 span 中的点赞数。计数器中的初始点赞数应为 100。

网友可以加个赞。通过点击按钮：喜欢的数量应该增加一个。除了“喜欢按钮”class.

之外，“喜欢”按钮还应该有“喜欢”class

用户可以通过再次点击按钮来撤消他们的赞：计数器应该减一。 “喜欢”class 应该删除。

和代码

import { Component, Injectable } from '@angular/core';

@Component({
    selector: 'like-button',
    template: `
        <h2>
          <span
  ><button (click)="buttonCliked()">Like |{{ likebutton.likeCounter }}</button></span
>
        </h2>
    `,
    styles: [`
        .like-button {
            font-size: 1rem;
            padding: 5px 10px;
            color:  #585858;
        }

        .liked {
            font-weight: bold;
            color: #1565c0;
        }
    `]
})

export class LikeButtonComponent {

  public likeCounter = 100;

  constructor(private likeButton: LikeButton, private liked: Liked) {}

  buttonCliked(): void {
    this.changeLikeNumber();
    this.toggleLike();
  }

  private toggleLike(): void {
    this.liked.isLiked = !this.liked.isLiked;
  }

  private changeLikeNumber(): void {
    if (!this.liked.isLiked) {
      this.likeCounter = this.likeButton.increment(this.likeCounter);
    } else {
      this.likeCounter = this.likeButton.decrement(this.likeCounter);
    }
  }
}

export class LikeButton {
  constructor(private liked: Liked) {}
  increment(likeCounter: number) {
    likeCounter++;

    return likeCounter;
  }
  decrement(likeCounter: number) {
    likeCounter--;
    return likeCounter;
  }
}

export class Liked {
  isLiked = false;
}

Answer 1

您必须使用一些 Angular 工具，例如 ngClass 以根据用户点击添加动态 class。此外，它将根据用户是否已经 liked 按钮的情况在一个功能中完成：

Working stackblitz example

代码：

import { Component, Injectable } from '@angular/core';

@Component({
    selector: 'like-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.css']
})

export class ButtonComponent {
  likeCount= 100;
  isLiked = false;
  
  likeTheButton = () => {
    if(this.isLiked)
    this.likeCount--;
    else
    this.likeCount++;

    this.isLiked = !this.isLiked
  }
}

.like-button {
  font-size: 1rem;
  padding: 5px 10px;
  color: #585858;
}

.liked {
  font-weight: bold;
  color: #1565c0;
}

 <button class="like-button" [ngClass]="{'liked':isLiked}" (click)="likeTheButton()">
  Like | <span class="like-counter">{{ likeCount }}</span>
</button>

Codility 喜欢按钮 angular

Codility like button angular

javascript

task

angular