Angular組件之星級評價組件

首先上實現(xiàn)的步驟：

  1. 如何顯示一顆星星
  2. 如何顯示一個空心的星星
  3. 如何顯示定義數(shù)量的星星
  4. 如何讓定義數(shù)量的星星有的空心、有的實心
  5. 如何把評分數(shù)值傳遞到組件中，根據(jù)評分顯示個數(shù)
  6. 讓傳遞進來的值控制最大的可顯示的星星數(shù)
  7. 添加點擊事件來操作評分，并改變對應星星個數(shù)
  8. 當可點擊之后，我們通過變量來控制是否能點擊。
  9. 把點擊的星星發(fā)射出去。

第一步（安裝環(huán)境）

  1. cnpm install -g @angular/cli (全局安裝angular-cli)
  2. ng new my-star （new 一個新項目 ）
  3. cd my-star (進入剛才我們new的新項目)
  4. ng serve --open (在瀏覽器中打開)

第二步（引入Bootstrap樣式）

  1. cnpm install bootstrap --save
  2. 在,angular-cli.json中的style中加入"../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css",（如果你是用npm下載的，那么bootstrap的包名可能會不一樣，請在node_modules文件下查看）
  3. OK，這樣就可以使用bootstrap的樣式了.

第三步（修改app文件夾下的app.component.html文件代碼）

<div style="text-align:center">
  <h1>
    <app-my-star></app-my-star>
  </h1>
  <h2>
    <span>星</span>
  </h2>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>

第四步（修改my-star文件夾下的my-star.component.html文件代碼）

<span>
  <span class="glyphicon glyphicon-star"></span>
</span>
//glyphicon-star是bootstrap字體樣式，如果想要空心可以使用glyphicon-star-empty

第五步（修改my-star文件夾下的my-star.component.html和my-star-component.ts文件代碼，實現(xiàn)多顆星星）

//my-star-component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-star',
  templateUrl: './my-star.component.html',
  styleUrls: ['./my-star.component.css']
})
export class MyStarComponent implements OnInit {

  public stars = [];

  constructor() { }

  ngOnInit() {
    this.stras = [true,true,false,true,true] 
  }
}
//my-star-component.html
<span>
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star" ></span>
</span>
//通過*ngFor循環(huán)實現(xiàn)多顆星星

第六步（通過屬性綁定class，實現(xiàn)空心的星星和實心的星星）

//my-star.component.html
<span>
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star" [class.glyphicon-star-empty]="!star"></span>
</span>

第七步（現(xiàn)在我們的星星個數(shù)是我們的stars數(shù)組寫死的，那么怎么把它變成可由我們自己控制的）

//在父組件中定義三個屬性,rating是實心的星星數(shù)，max是最大的星星數(shù)量，readonly是是否可點擊，為true時不可點擊。
//app.component.html
<div style="text-align:center">
  <h1>
    <app-my-star [(rating)]="rating" [max]="max" [readonly]="readonly"></app-my-star>
  </h1>
  <h2>
    <span>{{ rating | number:'1.0-1'}}星</span>
  </h2>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>
//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public max: number = 10;
  public rating: number = 0;
  public readonly: boolean = false;
}

//在my-star.component.ts中接收
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-my-star',
  templateUrl: './my-star.component.html',
  styleUrls: ['./my-star.component.css']
})
export class MyStarComponent implements OnInit {

  @Input()
  public rating: number;

  @Input()
  public max: number;

  @Input()
  public readonly: boolean;

  public stars = [];

  constructor() { }

  ngOnInit() {
    this.stars = [];
    for (let i = 0; i < this.max; i++) {
      this.stars.push(i < this.rating)  //rating是實心星星的個數(shù)，當rating的數(shù)值小于i的時候，往stars數(shù)組里push的就是false，星星為空心。
    }
  }
  
}

第八步（讓星星實現(xiàn)可點擊功能）

//my-star-component.html
<span>
  <span *ngFor="let star of stars; let i = index;" class="glyphicon glyphicon-star" [class.glyphicon-star-empty]="!star" (click)="onClick(i)"></span>
</span> //i 是ngFor循環(huán)的下標，通過事件綁定講點擊的是第幾顆星星傳入
//在my-star.component.ts中接收
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-my-star',
  templateUrl: './my-star.component.html',
  styleUrls: ['./my-star.component.css']
})
export class MyStarComponent implements OnInit {

  @Input()
  public rating: number;

  @Output()
  ratingChange: EventEmitter<number> = new EventEmitter();

  @Input()
  public max: number;

  @Input()
  public readonly: boolean;

  public stars = [];

  constructor() { }

  ngOnInit() {
    //重新清空數(shù)組
    this.stars = [];
    for (let i = 0; i < this.max; i++) {
      this.stars.push(i < this.rating)
    }
  }

  onClick(rate: number) {
    //如果readonly不為true時,
    if( !this.readonly ){
      //因為數(shù)組是從0開始，星星的個數(shù)不可能是0個，所以rate + 1
      this.rating = rate + 1; 
      this.ngOnInit();
    }
  }

第九步（根據(jù)點擊，實時顯示有多少顆星星）

//app.component.html
<div style="text-align:center">
  <h1>
    <app-my-star [(rating)]="rating" [max]="max" [readonly]="readonly"></app-my-star>
  </h1>
  <h2>
    <span>{{ rating | number:'1.0-1'}}星</span>
  </h2>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div> //通過數(shù)據(jù)雙向綁定在span標簽中綁定rating。

//my-star.component.ts
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-my-star',
  templateUrl: './my-star.component.html',
  styleUrls: ['./my-star.component.css']
})
export class MyStarComponent implements OnInit {

  @Input()
  public rating: number;

  @Output()
  ratingChange: EventEmitter<number> = new EventEmitter(); 

  @Input()
  public max: number;

  @Input()
  public readonly: boolean;

  public stars = [];

  constructor() { }

  ngOnInit() {
    this.stars = [];
    for (let i = 0; i < this.max; i++) {
      this.stars.push(i < this.rating)
    }
  }

  onClick(rate: number) {
    if( !this.readonly ){
      //因為數(shù)組是從0開始，
      this.rating = rate + 1; 
      this.ngOnInit();
      this.ratingChange.emit(this.rating);
    }
  }

}
// 通過@Output，聲明一個輸出口屬性。在通過emit用來發(fā)射值

OK，大功告成！

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容