Angular: 외부 라이브러리가 없는 별 등급

제공된 서비스를 평가하기 위해 다른 모든 블로그에 필요한 매우 간단하고 매우 필요한 작은 구성 요소입니다.

대부분의 개발자는 외부 시작 등급 라이브러리를 사용하여 많은 스타일과 매우 상호 작용적인 스타를 보여주기를 원합니다. 하지만 기본 JS 및 CSS 지원을 사용하여 이러한 스타일 별을 만들 수도 있습니다.

나는 항상 기본적으로 작성하는 것을 선호하므로 여기에 라이브러리를 사용하지 않고 별점을 구현했습니다.

개선 사항이 있으면 알려주십시오. 나는 항상 기사를 업데이트하게되어 기쁩니다.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Star Rating';

  arr: any[] = [];
  index: number = 0;

  constructor() {
    this.arr = [
      { value: 1, color: 'black' },
      { value: 2, color: 'black' },
      { value: 3, color: 'black' },
      { value: 4, color: 'black' },
      { value: 5, color: 'black' }
    ];
  }

  onClickItem(index: number) {
    this.index = index;
    this.manipulateArr(index);
  }

  onMouseHover(index: number) {
    this.manipulateArr(index);
  }

  onMouseLeave() {
    this.manipulateArr(this.index);
  }

  manipulateArr(index) {
    this.arr.forEach((item, i) => {
      if (i <= index - 1) {
        item.color = 'green';
      } else {
        item.color = 'black';
      }
    });
  }
}

<!--app.component.html-->
<div>
  <ul>
    <li *ngFor="let item of arr" (click)="onClickItem(item.value)" (mouseover)="onMouseHover(item.value)"
      (mouseleave)="onMouseLeave()" [style.color]="item.color">*
    </li>
  </ul>
</div>

<p>User Rated: {{ index }}/5</p>

// app.component.scss
ul li {
  width: 60px;
  cursor: pointer;
  display: inline-block;
  font-size: 80px;

  &:hover {
    color: green;
  }
}

대부분 쓰여진 모든 것은 자명하다. 그러나 설명은 항상 초보자에게 도움이됩니다.

HTML에서 arr를 사용하여 기호*(키보드에서 사용 가능)가 있는 항목의 ul를 사용하여 별표를 채웠습니다. 이 arr는 5 요소로 초기화되므로 5-stars가 표시됩니다. 초기화된 배열에 대한 ts 파일을 볼 수 있습니다.

사용자가 마우스를 가져 가면 색상이 green로 변경되고 그렇지 않으면 black 두 개의 이벤트 mouseover 및 mouseleave를 사용하여 처리되었으며 매번 해당 메서드가 실행되었습니다.

또한 사용자가 별을 클릭하면 count가 아래에서 User Rated: 4/5로 업데이트되고 색상은 선택될 때까지 green입니다.

당신은 나를 따라 오셔도 돼요:

여기에서 작동 방식을 확인할 수 있습니다.

angular-ivy-bat5xd.stackblitz.io


감사