Angular 2 SVG 属性的 @Input 指令语法以避免 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">~~

~~这将使用 component.width 中的值创建一个属性 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;

Angular 2 SVG 属性的 @Input 指令语法以避免 lint no-input-rename 警告

Angular 2 @Input directive syntax for SVG attributes to avoid lint no-input-rename warning

svg

tslint

angular2-directives

angular