角度自定义控件-星形额定值-输入值 明星 星光轮廓 @组成部分({ 选择器：“jfg星级”， templateUrl:'./starrating.component.html'， styleUrls:['./starrating.component.scss']， 供应商：[ { 提供：NG_值访问器， useExisting:forwardRef（（）=>StarRatingComponent）， 多：真的 } ] }) 导出类StartingComponent实现ControlValueAccessor{ 星形：布尔[]=数组（3）.填充（true）； //允许禁用输入，并在输入时使其变得透明。 @Input（）已禁用=false； @主机绑定（'style.opacity'） 获取不透明度（）{ 返回此。禁用？1:1； } //当额定值更改时调用的函数。 onChange=（评级：编号）=>{ }; //当触摸输入时（单击星号时）调用的函数。 onTouched=（）=>{ }; 获取值（）：编号{ 如果（！this.disabled）{ 返回此.stars.reduce（（总计，带星号）=>{ 返回总数+（带星号的？1:0）； }, 0); } } 比率（评级：数字）{ 如果（！this.disabled）{ 此。writeValue（评级）； } } //允许Angular更新模型（额定值）。 //在此更新视图所需的模型和更改。 writeValue（评级：编号）：无效{ 如果（！this.disabled）{ this.stars=this.stars.map（（（uu，i）=>rating>i）； this.onChange（this.value）； } } //允许Angular在模型（额定值）更改时注册要调用的函数。 //将函数另存为属性，以便稍后在此调用。 注册变更（fn:（评级：编号）=>作废）：作废{ this.onChange=fn； } //允许Angular在触摸输入时注册要调用的函数。 //将函数另存为属性，以便稍后在此调用。 注册表项（fn:（）=>void）：void{ this.ontoched=fn； } //允许Angular禁用输入。 setDisabledState（isDisabled:boolean）：无效{ this.disabled=isDisabled； } }

我想做一个明星级的组件。我让它作为输入正常工作。因此，我可以按星号以获取正确的值作为formControl，并将其传递给我的服务。但我的问题是，我试图让我的组件以@输入的形式获取值，并根据该值设置星星数。我试着输入值并在任何地方设置它，但仍然没有效果。如果您能建议我如何从输入中设置值，我将很高兴：）

您已经实现了

ControlValueAccessor

，因此您应该能够通过

ngModel

设置值，这是两个绑定。您不需要任何其他输入来设置该值。因此，您可以将您的

StarRatingComponent

用作-

<div class="rating">
<div style="display: inline-block"
  *ngFor="let starred of stars; let i = index"
  (click)="rate(i + (starred ? (value > i + 1 ? 1 : 0) : 1))">
      <ng-container *ngIf="starred; else noStar"><mat-icon class="filled">star</mat-icon></ng-container>
      <ng-template #noStar><mat-icon class="empty">star_outline</mat-icon></ng-template>
    </div>
</div>   


 @Component({
  selector: 'jfg-star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => StarRatingComponent),
      multi: true
    }
  ]

})
export class StarRatingComponent implements ControlValueAccessor{

  stars: boolean[] = Array(3).fill(true);

   // Allow the input to be disabled, and when it is make it somewhat transparent.
  @Input() disabled = false;
   @HostBinding('style.opacity')
   get opacity() {
     return this.disabled ? 1 : 1;
   }

   // Function to call when the rating changes.
   onChange = (rating: number) => {
   };

   // Function to call when the input is touched (when a star is clicked).
   onTouched = () => {
   };


   get value(): number {
     if(!this.disabled){
     return this.stars.reduce((total, starred) => {
       return total + (starred ? 1 : 0);
     }, 0);
     }
   }
   rate(rating: number) {
     if (!this.disabled) {
       this.writeValue(rating);
     }
   }

   // Allows Angular to update the model (rating).
   // Update the model and changes needed for the view here.
   writeValue(rating: number): void {
     if (!this.disabled) {
       this.stars = this.stars.map((_, i) => rating > i);
       this.onChange(this.value);
     }

   }

   // Allows Angular to register a function to call when the model (rating) changes.
   // Save the function as a property to call later here.
   registerOnChange(fn: (rating: number) => void): void {
     this.onChange = fn;
   }

   // Allows Angular to register a function to call when the input has been touched.
   // Save the function as a property to call later here.
   registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }

   // Allows Angular to disable the input.
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;


   }
 }

或

---

此处是工作副本-

其中唯一的输入是禁用的

属性。在此之前，它是一个自定义表单控件组件。因此，逻辑是作为任何输入工作，您可以使用或
<jfg-star-rating [ngModel]="3"></jfg-star-rating>

<jfg-star-rating [(ngModel)]="rating"></jfg-star-rating>