Синтаксис Angular 2 @Input для атрибутов SVG, чтобы избежать предупреждения lint no-input-rename

Question

Я пишу директиву атрибута для элемента SVG:

@Directive({
  selector: '[pinchresize]'
})
export class PinchResizeDirective {
  @Input('attr.width') width: number;
...
}

width Атрибут является действительным атрибутом SVG и должен быть указан в шаблоне через attr.width:

<g pinchresize [attr.width]="component.width">

Как закодировано, директива работает правильно, но, похоже, что это не тот синтаксис, согласно tslint:

[tslint] In the class "PinchResizeDirective", the directive input
property "width" should not be renamed.Please, consider the following
use "@Input() width: string" (no-input-rename)

Если я использую общий синтаксис, указанный в tslint атрибут width не инициализируется и имеет значение undefined:

@Input() width: number;

У меня возникают проблемы с правильным синтаксисом для этой ситуации.

Answer 1

Просто

@Input() width: number;

должен делать то, что вы хотите.

[attr.xxx] это специальный синтаксис привязки, и это не будет работать, если вы называете вход с attr. префикс.

Если вы хотите или нуждаетесь в привязке атрибута вместо привязки свойства, вы можете использовать

(не работает)

<g pinchresize [attr.width]="component.width">

Это создаст атрибут width со значением от component.width и назначит значение атрибута @Input() width: number;

@HostBinding('attr.width')
@Input() width: number;

с

результаты в

<g name="b" pinchresize="" ng-reflect-name="b" ng-reflect-width="55" width="55"></g>

с width="55" набор атрибутов и значение, переданное @Input() width:number;