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

Question

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

<container row crosscenter wrap spacearound ...>

在container.html

中产生类似的结果

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

我缺少的是如何设置

@Input('row') isRow = false;

如果＆＃39; row＆＃39;

为true存在于集装箱内。

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

Answer 1

这可以在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'">

Answer 2

我认为我的问题的答案是为每个单词＆＃34;创建指令。标签（属性）我想使用。 ： - ）