如何使用动态名称创建 Angular 2 自定义属性指令？答案

【问题标题】：How can I create Angular 2 custom attribute directive with dynamic name?如何使用动态名称创建 Angular 2 自定义属性指令？
【发布时间】：2016-07-20 10:40:35
【问题描述】：

我想以与本例中使用的“attr”、“class”、“style”等内置指令相同的方式创建自定义属性指令：

<div [style.width.px]="mySize">

文档here 仅描述了具有固定指令名称的情况。所以问题是：

我应该如何为此类指令指定选择器？
如何检索指令名称的可变部分？

或者可能根本不可能并且仅用于内置指令？

【问题讨论】：

标签： javascript angular

【解决方案1】：

尽管@Günter 也检查过几乎肯定不可能做到这一点。

PLUNKER &neArr;

但如果您只是想要一个与style 几乎相似的指令，这可能会对您有所帮助。

用法：

<h2 [customStyle]="['width.px', mysize]" >Hello {{name}}</h2>

自定义指令：

@Directive({
  selector: '[customStyle]',
  inputs: ['style:customStyle']
})
export class CustomDir{
  style;
  constructor(private elRef: ElementRef){
  }

  ngAfterViewInit(){
    if(this.style){
      const prop = this.style[0].split('.')[0];
      const unit = this.style[0].split('.')[1];
      const val  = this.style[1];

      this.elRef.nativeElement.style[prop] = val + (unit || '');
    }
  }
}

【讨论】：

是否可以像 style.* 绑定一样在一个标签中拥有多个 customStyle 属性？
不幸的是没有。但您可以随时修改它以接受多个样式，就像 ngStyle
还有一个问题。为什么你的代码需要 setTimeout()？
哦，我不小心把它放在那里了，最初我使用 OnInit 钩子需要手动更改检测触发器，但现在不需要了。抱歉，删除..

【解决方案2】：

据我所知，这不受支持，也没有计划。

或者可能根本不可能并且仅用于内置指令？

此语法与指令无关，它是内置的绑定语法。

【讨论】：