Typescript Can'；t绑定到'；someProperty'；因为它不是'；t'的已知属性；someComponent'；角度5

在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>

---

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

您的@Input设置为下划线值，而不是

@Input-value

，您的问题就在这里。您希望确保您的

@输入与使用组件/指令时使用的内容相匹配

最简单的未经测试的例子

import { Component } from '@angular/core';

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

从'@angular/core'导入{Component}；
@组成部分({
选择器：'颜色组件'，
模板：`{color}}}`
})
导出类颜色组件{
@Input（）颜色：字符串；
}

然后，当您使用组件时

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


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>