Angular 将主组件的数据绑定到子组件的数据中失败

Question

将主组件的数据绑定到子组件的数据中失败

相关代码

<!--主组件模版-->
  <div class="container">
    <app-qa *ngIf="gameStart"></app-qa>
    <app-readme [readed]="isRead"></app-readme>
  </div>

<!--子组件模版-->
<div id="readMe" class="{{readMeClass}}" *ngIf="readed">
</div>

// 主组件代码
export class AppComponent {
  title = 'MBTI-16种人格类型测试';
  isRead:boolean = false;
  gameStart:boolean = false;
}

// 子组件代码
export class ReadmeComponent implements OnInit {
  readMeClass:string = "";  
  readed:boolean;

  constructor() { }

  ngOnInit() {
  }
}

返回错误

compiler.js:2547 Uncaught Error: Template parse errors:
Can't bind to 'readed' since it isn't a known property of 'app-readme'.

Answer 1

你绑定数据到子组件不用Input么？

// 主组件代码
export class AppComponent {
  title = 'MBTI-16种人格类型测试';
  isRead:boolean = false;
  gameStart:boolean = false;
}

// 子组件代码
export class ReadmeComponent implements OnInit {
  readMeClass:string = "";  
  @Input() readed:boolean;

  constructor() { }

  ngOnInit() {
  }
}

Answer 2

问题在于组件没有引入 @Input 模块，并没有在被映射的属性上加@Input问题在于组件没有引入 @Input 模块，并没有在被映射的属性上加@Input