angular 生命周期钩子项目实战—星级评价动态更改数据

1.在星级评价组件stars.component.html模板中

<span *ngFor="let star of stars;let i=index" 
    [class.glyphicon-star-empty]="star" 
    (click)="starClick(i)" 
    class="glyphicon glyphicon-star ">
</span>

2.在星级评价组件stars.component.ts控制器中：

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

@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit,OnChanges {
  stars:boolean[];
  @Input()
  rating:number
  @Output()
  ratingChange:EventEmitter<number>=new EventEmitter();  //ratingChange命名规则使得在表单内通过双向绑定将star的rating
  //ratingChange 将发射rating到父组件
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    //输入属性发生变化是才调用，第一次调用在ngOnInit之前
    this.stars=[];
    for(let i=1;i<=5;i++){
      this.stars.push(i>this.rating);
    }
  }

  starClick(index:number){
    this.rating=index+1;
    alert(index);
    this.ratingChange.emit(this.rating);
  }
}

3.在父组件stock-form.component.html中将输入star中的输入属性的传入改为双向绑定

 <app-stars [(rating)]="stock.rating"></app-stars>

这里是利用输出属性发射事件ratingChange和输入属性rating特殊的命名规则才可以完成将rating和表单中的stock.rating双向绑定