角度 2 分量的布尔输入答案

【问题标题】：Boolean inputs to angular 2 component角度 2 分量的布尔输入
【发布时间】：2017-10-08 01:08:08
【问题描述】：

我正在尝试编写一个组件以在我的应用程序中重用，它有时会显示一个控制按钮，有时不会。

理想情况下，我希望从属性的存在或不存在中获取此信息，以便使用该组件看起来像<generic-component hideControls></generic-component>，在我的组件中根据该属性是否存在一个布尔变量，但是我看不出有办法做到这一点。

有没有办法做到这一点？

我已经尝试过下面稍微杂乱的版本（尽管理想情况下我不需要在 showControls/hideControls 上设置值）；

generic.component.html

<div>
  <div>Stuff</div>
  <div *ngIf="showControls">Controls</div>
</div>

generic.component.ts

// imports etc.
@Component({
  selector: 'generic-selector',
  templateUrl: 'generic.component.html'
})
export class GenericComponent implements OnInit {
  @Input()
  public showControls: boolean = true;

  // other inputs and logic
}

这失败了，因为用法 <generic-selector showControls="false"></generic-selector> 将 showControls 设置为字符串“false”，这是真实的，而不是布尔值。因此，我必须通过向组件添加大量混乱来解决它以接收输入并根据它是否被赋予字符串“false”来转换为布尔值。一种非混乱的排序方式将不胜感激，但我更希望能够执行上述其他选项。

【问题讨论】：

标签： angular

【解决方案1】：

这失败了，因为用法 <generic-selector showControls="false"></generic-selector> 将 showControls 设置为字符串“false”，它是真实的，而不是布尔值。所以我必须通过向组件添加大量混乱来解决它接受输入并根据是否为布尔值是否给定字符串“false”。一种非杂乱的排序方式将不胜感激，但我更希望能够做其他选择以上。

使用绑定

<generic-selector [showControls]="false"></generic-selector>

【讨论】：

[showControls]="false" 效果很好。 showControls={{false}} 不起作用。
在stackoverflow.com/questions/35944749/…了解更多关于这些括号属性的信息
解决方案完美运行，但为什么角度不考虑 false 作为变量，请解释...
@AbhijitJagtap false 是 JavaScript 中的保留关键字，不能用作变量名。

【解决方案2】：

您可以像使用其他属性一样使用Input 装饰器。唯一的技巧是，当属性不存在时，值将是undefined，否则，值将是一个空字符串。

逻辑：

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

@Component({
  selector: '',
  templateUrl: './boolean-component.component.html'
})
export class AppBooleanComponent implements OnInit {

  @Input('boolean-attribute') booleanAttr: boolean;

  ngOnInit() {
    this.booleanAttr = this.booleanAttr !== undefined;
    console.log(`Boolean attribute is ${this.booleanAttr ? '' : 'non-'}present!`);
  }

}

模板 1（记录“布尔属性存在！”）：

<app-boolean-component boolean-attribute></app-boolean-component>

模板 2（记录“布尔属性不存在！”）：

<app-boolean-component></app-boolean-component>

【讨论】：

【解决方案3】：

在 Angular 中，有两种方法可以为你的属性赋值：

作为 HTML 属性使用
带方括号

在第一种情况下，您的属性值将始终是一个字符串，就像每个 HTML 属性一样，即使您将分配一个可插入的字符串，如下所示：{{true}}。

在第二种情况下，它将被解释为 JavaScript 表达式，但在您的上下文中。因此，如果您有一个对象表示法，那么您的属性值将被解析为一个对象。但是对于指定上下文，角度不使用“with”语句，所以你不能在那里使用你的全局变量，而只能使用你的组件被插入的组件的属性。

<generic-selector [showControls]="false"></generic-selector>

在这种情况下，它接受字符串“false”并将其转换为 JavaScript。所以在 JavaScript 中，它是一个布尔值，然后你会得到一个 boolean。

但如果你有这样的东西： <generic-selector [showControls]="{myProp: 'val'}"></generic-selector>

那么您的 showControls 的类型将是 object，其值将具有 myProp 属性等于 'val'。

但如果你有一些非文字的，那么它会被认为是你的类的属性：

<generic-selector [showControls]="location"></generic-selector>

那么，如果您在包含 generic-selector 的组件范围内拥有一个 location 属性，那么它将采用其 location 属性的值，否则它将是未定义的。

我建议您考虑使用 ngOnInit 来记录属性的类型和分配的值。

【讨论】：