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

Question

I'd like to make a directive similar to how the attribute directive works. Allowing for a . wildcard scenario, and specifying it multiple times.

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

I couldn't dig up any info on the docs saying how to do this. Maybe this is a special exception to the framework?

Answer 1

[attr.*] , [style.*] and [class.*] aren't directives. These are so called binding targets , that make the HTML operations simpler; they are the part of Angular template engine.

They are not only not directives, as of now it is actually not possible to make any kind of directive like that, because:

1. There is no query selector that implements a wildcard search by HTML attribute name (it is possible to have wildcard search for the attribute value only); and without this mapping angular cannot identify the directive
2. Assume point 1 can be tricked by using * as the selector (which actually also is not working), then there is another problem. The @Input decorator / @Directive's inputs property does not allow wildcard bindings to get the array of name-value properties that you would like to pass. That means you need to name each property in advance.

So it is not really possible to get what you want.

However, if your list is finite, you can always create a wildcard directive and listen to your inputs:

@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);
  }

}

or probably you can use different selector like

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

which could theoretically lead to performance issues.