Angular2使用指令在标签中插入自定义属性

Question

我有一个angular 2项目，正在使用PrimeNG。我使用的是带有很多自定义属性的特殊标签，这些标签的这些属性始终相同。我想外部化这些属性，并创建了一个自定义指令，用于添加所需的所有属性。问题在于这些属性中的某些不是本机的，也许无法识别。我收到错误“无法在'Element'上执行'setAttribute'：'[myCustomAttribute]'不是有效的属性名称。

这是我的指令：

@Directive({
  selector: '[def-calendar]'
})
export class DefaultCalendarDirective {

  constructor(private _elRef: ElementRef, private _renderer: Renderer2) {
  }

  ngOnInit() {
    this._renderer.setAttribute(this._elRef.nativeElement, '[yearRange]', '1900:2100');
  }
}

有人知道我该如何解决吗？我不知道是否有一种方法可以复制元素（例如字符串）并操纵添加属性的字符串。

谢谢Fabrizio

Answer 1

您不能用来renderer.setAttribute(...)设置不属于您正在使用的本机 HTML 元素的属性。
yearRange甚至不是任何本机 HTML 元素的准确属性。应将其声明为指令类中的输入，以便正确设置其值：

@Directive({
  selector: '[def-calendar]'
})
export class DefaultCalendarDirective implements OnInit {

  @Input() yearRange: string = '1900:2100';

  constructor() {
  }

  public ngOnInit() {}
}

当您在元素上使用指令时，您还可以通过向其传递字符串（或者也可以使用绑定）来更改输入值。

<someElement def-calendar yearRange="1900:2100"></someElement>