Angular 2组件输入没有值

Question

我想创建一个组件，其中的属性不需要值。例如，不要像现在这样写：

<app-document [mode]="'edit'" ... ></app-document>

或者

<app-document [editMode]="true" ... ></app-document>

我更愿意拥有：

<app-document editMode ...></app-document>

因此组件本身必须查看属性editMode是否存在。当我有很多这样的属性时，这将显得更加清晰易懂。我没有看到任何关于如何做到这一点的文档。这可行吗？

- AlanObject

Answer 1

Material2编写了以下方法：

/** Coerces a data-bound value (typically a string) to a boolean. */
export function coerceBooleanProperty(value: any): boolean {
  return value != null && `${value}` !== 'false';
}

在你的app-document组件中编写类似这样的内容：

private _editMode: boolean;
@Input()
get editMode() { return this._editMode; }
set editMode(value: any) { this._editMode = coerceBooleanProperty(value); }

那么：

editMode == true
<app-document editMode></app-document>

editMode == false
<app-document></app-document>

如果您使用Material2，您可以按以下方式简单导入该方法：

import {coerceBooleanProperty} from '@angular/cdk/coercion';

- Alexandre Annic

Answer 2

你可以使用布尔类型的 @Input 来实现这个功能。

HTML：

<app-document [editMode] ...></app-document>

TS:

export class AppDocumentComponent {
  @Input() editMode: boolean = true;
  // ...
}

现在你有一个布尔值可以用来改变你的行为。

为了更好地理解，请注意：

如果存在（没有值的）属性，则默认值true会生效。 如果不存在，则editMode不会获得默认值，而是获得一个假的未定义值。（所以这就是为什么它有效的原因）。

- 0xcaff

---

我没有想到那个模式，但那很聪明。如果我没记错的话，editMode的值是与直觉相反的（布尔非），但我可以接受。类似@Input('editMode') notEditMode: boolean = true;。咖啡因和猴子似乎很搭配，我猜。 - AlanObject

这种更简单的方法应该会得到更多的支持。 - Frank N

这个解决方案的问题在于<app-document editMode ...></app-document>会导致editMode为false。 - Thomas Marti

问题在于，使用@Input时，我们需要使用方括号，这并不是很自然。 - serge

如果没有，则editMode不会获得默认值，而是一个虚假的未定义值。 （所以，这就是为什么它起作用的原因）。这是不正确的，它无论如何都将是真的。 - Desperado