什么时候使用ngStyle或使用自定义指令更好

Question

我必须动态更改列的宽度，为此我制作了一个自定义指令：

@Directive({
selector: '[rq-column-size]'
})
export class ColumnSizeDirective {
@Input('rq-column-size') set rqColumnSize( width: string) {
this.eleRef.nativeElement.style.width = width + '%';
}
constructor(private eleRef: ElementRef) { }
}

用于HTML:

<th [rq-column-size]="col.width" ....

问题是：

使用[ngStyle]还是我的自定义指令更好？

Answer 1

Directive-这对于添加样式来说更为复杂。指令通常用于内部的某些逻辑。

但你只需要在这里做造型。所以如果您需要样式，请使用[ngStyle]，如果是[style.width.%]="value"，请使用更多。

Answer 2

要直接在组件上更改样式，有两种方法HostBinding或Renderer2。如果您的Input发生了更改，您需要每次使用"Render2"更新它，但使用HostBinding时，这是自动完成的，而且语法要干净得多。

这就是为什么最好使用HostBinding

@Directive({
selector: '[rq-column-size]'
})
export class ColumnSizeDirective {
@Input('rq-column-size')
@HostBinding('style.width.%')
rqColumnSize: number;
}