无值角度2分量输入

Question

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

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

或

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

我宁愿有：

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

因此组件本身必须查看属性editMode是否存在。当我有很多这样的属性时，这个看起来会干净很多。我没有看到任何关于如何做到这一点的文档。可行吗？

Answer 1

您可以使用布尔值< code>@Input来实现这一点。

HTML:

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

TS:

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

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

为便于理解，请注意:

如果有(无值)属性，则默认值< code>true生效。如果没有，则< code>editMode不会获得默认值，而是一个falsy undefined。(所以，这就是为什么这是可行的)。

Answer 2

材料2写了以下方法:

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

在应用文档组件中编写类似内容的内容：

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