无法绑定到“someProperty”，因为它不是 Angular 5 中“someComponent”的已知属性

Posted 2023-02-23

【中文标题】无法绑定到“someProperty”，因为它不是 Angular 5 中“someComponent”的已知属性

【英文标题】：Can't bind to 'someProperty' since it isn't a known property of 'someComponent' in Angular 5

【发布时间】：2018-05-15 18:34:11

【问题描述】：

在 Angular 5 应用程序中，我使用以下组件：

import 
  Component,
  OnInit,
  Input,
  forwardRef
 from '@angular/core';
import 
  ControlValueAccessor,
  NG_VALUE_ACCESSOR
 from '@angular/forms';

@Component(
  selector: 'int-switcher',
  templateUrl: './switcher.component.html',
  styleUrls: ['./switcher.component.scss'],
  providers: [
    
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SwitcherComponent),
      multi: true
    
  ]
)
export class SwitcherComponent implements OnInit, ControlValueAccessor 
  @Input() _value: boolean;
  get value() 
      return this._value;
  
  set value(val) 
      this._value = val;
      this.propagateChange(this._value);
  
  constructor() 

  ngOnInit() 
  writeValue(value: any): void 
    if (value !== undefined) 
      this._value = value;
    
  
  propagateChange = (_: any) => ;
  registerOnChange(fn: any): void 
      this.propagateChange = fn;
  
  registerOnTouched(fn: any): void 
  toggleValue() 
    this.value = !this.value;
    this.propagateChange(this.value);
  

和模板：

<div class="switcher" (click)="toggleValue()">
  <div class="switcher-label"><ng-content></ng-content></div>
  <div class="switch">
    <input class="switch-input" type="checkbox" [(ngModel)]="value">
    <label class="switch-label switch-paddle"></label>
  </div>
</div>

我正在尝试设置此属性的值，但出现以下错误：

无法绑定到“值”，因为它不是 'int-switcher'。

如果 'int-switcher' 是一个 Angular 组件并且它有 'value' 输入，那么验证它是这个模块的一部分。 如果“int-switcher”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 禁止显示此消息。 要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。

我已尝试执行以下操作：

<int-switcher name="groupHotel" formControlName="groupHotel" (click)="setGrouping($event)" [value]="isGrouped">

在 ngInit 中：

  isGrouped: boolean;
  ngOnInit(): void 
    this.isGrouped = true;

为什么我不能绑定到这个属性？

【参考方案1】：

您的@Input 设置为下划线值，而不是@Input value，您的问题就在那里。您要确保您的 @Input <name> 与您在使用组件/指令时使用的内容相匹配。

最简单的未经测试的例子；

import  Component  from '@angular/core';

@Component(
  selector: 'color-component',
  template: `<div>color</div>` 
)
export class ColorComponent 
  @Input() color: string;

那么当你使用组件时

<color-component [color]="blue"</color-component>