Angular2:将布尔值传递给@Input

Fio*_*ona 28 angular

我在angular2中编写了一个可重用的组件.在父组件中,我可以通过将它包含在模板中来设置子项中@Input的值,如下所示:

 <child-component #logoutModal [button1Text]="'Do Something Groovy'" 
  [showbutton1]="false"></child-component'
Run Code Online (Sandbox Code Playgroud)

{{ button1Text }}正如预期的那样,使用插入到子项中的文本.但是,对于上面的布尔值,该值不会传递到模板中.如果我{{showButton1}}在子组件的模板中,它会显示true,这是使用@Input装饰器在子类中设置的默认值.

编辑:这是我如何设置子组件中的默认值:

export class ChildComponent implements AfterViewInit {
  // default values
  @Input() public showButton1: boolean = true;
  @Input() public button1Text: string = 'OK';
  //..
Run Code Online (Sandbox Code Playgroud)

如何从父组件覆盖/设置此布尔值?谢谢!

Gün*_*uer 16

它应该是

[showButton1]
Run Code Online (Sandbox Code Playgroud)

代替

[showbutton1]
Run Code Online (Sandbox Code Playgroud)

(大写B- Angular2模板区分大小写)

  • 我花了3个小时试图弄清楚为什么我的布尔输入不符合输入的booleaness(我错过了方括号).谢谢你的简单例子. (7认同)
  • DOH!面对掌.谢谢你的耐心! (5认同)