Question

我有一个布尔的奇怪问题，我试图将其作为输入传递给我的指令。由于某种原因，angular将布尔值转换为字符串，尽管我将其键入为布尔值。

组件，如您所见，背景是布尔值：

export class ModalsExportComponent extends Modal {
  private background: boolean = false;
  ...
}

模板，这里我将背景绑定到我的指令输入：

<label for='showBackground' cmgSharedCustomCheckbox='{{background}}'><span></span>Include Background</label>

指令，这里我定义输入并将其类型设置为布尔值，但它以某种方式转换为字符串：

@Directive({
    selector: '[cmgSharedCustomCheckbox]'
})

export class SharedCustomCheckboxDirective implements AfterViewChecked {
  @Input('cmgSharedCustomCheckbox') isChecked: boolean;

  constructor(  private element: ElementRef,
                private renderer: Renderer ) { }

  public ngAfterViewChecked(): void {
    this.renderer.setElementClass(this.element.nativeElement.children[0], 'checkbox-unselected', true);
  }

  @HostListener('click') click(): void {
    console.log(typeof this.isChecked);
    if (this.isChecked) {
      console.log('here');
      this.renderer.setElementClass(this.element.nativeElement.children[0], 'checkbox-unselected', false);
      this.renderer.setElementClass(this.element.nativeElement.children[0], 'checkbox-selected', true);
    }
  }
}

您在我的点击主机监听器中会注意到我有一个控制台日志，其中包含this.isChecked的类型，它记录了字符串。我如何得到有棱有角的尊重我已经告诉它这个值是布尔值的事实？

Answer 1

如上所述here，

大括号之间的材质是Angular首先评估的模板表达式，然后转换为字符串。

要绑定非字符串值，请使用

<label for='showBackground' [cmgSharedCustomCheckbox]='background'>...</label>

Angular 2（RC.6）指令@Input被转换为字符串

1 个答案: