Question

我想创建一个类似于属性指令工作方式的指令。允许使用.通配符方案，并多次指定。

<div [attr.width]="width" [attr.height]="height" [attr.*]="" >...

我无法从文档中找到有关如何执行此操作的任何信息。也许这是该框架的特殊例外？

Answer 1

[attr.*]，[style.*]和[class.*]不是指令。这些就是所谓的binding targets，它使HTML操作更加简单；它们是Angular模板引擎的一部分。

它们不仅不是指令，到目前为止，实际上不可能做出任何这样的指令，因为：

没有查询选择器可以通过HTML属性名称实现通配符搜索（可以仅对属性值进行通配符搜索）；如果没有这种映射，角度就无法识别指令
可以通过使用*作为选择器（实际上也不起作用）来欺骗假设点1，这又是一个问题。 @Input装饰器/ @Directive's inputs property不允许通配符绑定获取您要传递的名称-值属性数组。这意味着您需要提前命名每个属性。

因此，真正不可能获得想要的东西。

但是，如果您的列表是有限的，则始终可以创建一个通配符指令并监听您的输入：

@Directive({ selector: '[my-attr.attr1],[my-attr.attr2],[my-attr.attr3]' })
export class SemiWildcardDirective {

  @Input('my-attr.attr1') attr1: string;
  @Input('my-attr.attr2') attr2: string;
  @Input('my-attr.attr3') attr3: string;

  // and here do whatever, e.g.
  ngOnChanges() {
    console.log(this);
  }

}

或者可能您可以使用其他选择器，例如

@Directive({ selector: 'div,a,p,button,input,...' })

从理论上讲可能会导致性能问题。

如何在Angular 5中创建通配符指令？

1 个答案: