angular 2+ 个具有属性名称且无参数的组件

Question

我想允许用户提供不带参数值的单字属性列表。例如，

<container row crosscenter wrap spacearound ...>

这会在 container.html

中产生类似的结果

<div [ngClass]="{ 'flexDisplay': true, 'directionRow': isRow, 'directionCol': isCol, 'contentSpaceAround': isSpaceAround}" ...>

我缺少的是如何设置

@Input('row') isRow = false;

如果容器行中存在 'row'，则为真。

有什么想法吗？提前致谢。瑜珈

Answer 1

我认为我的问题的答案是为我想使用的每个 "one-word" 标签（属性）创建指令。 :-)

Answer 2

这可以在 ngOnChanges 中处理。该值可以分配回输入属性或分配给将传递给 ngClass

的某个对象

ngOnChanges(changes: SimpleChanges) {
  if ('foo' in changes) {
    this.options.foo = true;
  }
}

由于无法取消分配输入，因此没有理由为它们提供绑定。可以用@Attribute代替：

constructor(@Attribute('foo') public foo: boolean|null) {
  this.foo = (foo != null);
}

在设计方面，对常规选项使用属性不是一个好的决定。这可以防止动态设置它们。相反，接受选项输入总是更可取。如果所有选项都应该是标志，它可以是一个字符串输入，将在 ngOnChanges 中拆分和处理，如：

<container options="row crosscenter wrap spacearound">

或

<container [options]="'row crosscenter wrap spacearound'">

angular 2+ component with attribute name and no parameters