Question

我有一个<app-my-table></app-my-table>组件，它接受showActions作为输入。

我通常像这样<app-my-table [showActions]="true"></app-my-table>

使用它

如果能使用以下语法也能使其工作，我将不胜感激：

<app-my-table showActions></app-my-table>

请参见以下示例：

Answer 1

如果要这样做，可以创建一个新指令，然后将此指令注入到组件的构造函数中。

constructor(@Self() @Optional() private showActionsDir: ShowActionsDirective) {
    if (showActionsDir) {
        this.showActions = true;
    }
}

注意@Optional和@Self装饰符，以便在找不到该指令且仅在组件的本地注入器中进行搜索时，angular不会引发错误。

@trichetriche的答案也可以，但是在我看来，它的表达并不真正。另一方面，我提供的方法可以看作是太多不必要的代码和无用的指令，因为它只是该组件的标记，没有其他功能。

如果我是您，我会选择最明确的方式，您已经在问题（[showActions]="true"中显示了这种方式。

Answer 2

private _showActions = null;
public set showActions(value: any) {
  this._showActions = value === '';
  ...

解释一下：

使用@Input装饰器时，可以为变量定义默认值。在这里，我们将使用null作为默认值，尽管您可以只使用undefined。

当您像想要的那样在组件选择器中输入输入（<x showActions>）时，实际上是在写一个速记。真正的语法是

<x showActions="">

这表示您的输入值（如果不提供）为空字符串''。

这意味着您所要做的就是将输入值与一个空字符串进行比较，并相应地设置内部变量。