Question

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

理想情况下，我希望从属性的存在或缺失中获取此信息，以便使用该组件看起来像<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设置为字符串＆＃34; false＆＃34;，这是真实的，而不是布尔值。因此，我必须通过向组件中添加大量混乱来获取输入并根据是否给出字符串＆＃34; false＆＃34;来转换为布尔值。或不。一种非杂乱的排序方法将不胜感激，但我更喜欢能够做到上面的其他选择。

Answer 1

这失败了，因为使用<generic-selector showControls="false"></generic-selector>将showControls设置为 string＆＃34; false＆＃34;，这是真实的，而不是布尔值。所以我必须通过在组件中添加大量混乱来绕过它接受输入并根据它是否转换为布尔值被赋予字符串＆＃34; false＆＃34;或不。一种非杂乱的方式来排序这个我将不胜感激，但我更愿意做其他选择上方。

使用绑定

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

Answer 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（记录＆＃39;布尔属性存在！＆＃39;）：

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

模板2（日志＆＃39;布尔属性不存在！＆＃39;）：

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

Answer 3

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

使用HTML属性
方括号

在第一种情况下，即使您要指定一个可插入的字符串，您的属性值也将始终为字符串，就像每个HTML属性一样：{{true}}。

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

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

在这种情况下，它需要字符串＆＃34; false＆＃34;并将其转换为JavaScript。所以在JavaScript中，它是一个布尔值，然后你将它作为boolean。

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

然后showControls的类型将为object，其值将使myProp属性等于＆＃39; val＆＃39;。

但是如果你在那里有一些非文字，那么它将被视为你班级的财产：

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

然后，如果您在包含generic-selector的组件范围内有一个位置属性，那么将获取其location属性的值，否则它将被取消定义。

我建议您考虑使用ngOnInit记录属性的类型和指定的值。

布尔输入到角度2分量

3 个答案: