Question

我想创建一个具有不需要值的属性的组件。例如，而不是像这样的东西:(我现在拥有）

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

或

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

我宁愿拥有：

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

因此，组件本身必须查看属性 editMode 是否存在。当我有很多这样的属性时，这看起来会更清晰。我还没有看到有关如何执行此操作的任何文档。它可行吗？

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';

Answer 2

您可以使用布尔@Input来实现此目的。

HTML：

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

TS：

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

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

nb以便更好地理解：

如果是 a（无值）属性，则默认值true启动。如果没有，editMode没有得到默认值，但是未定义的假值。（所以，这就是为什么这样做的原因）。

Angular 2组件输入没有值

2 个答案: