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

【问题标题】：when is it better to use ngStyle or use a custom directive?什么时候使用 ngStyle 或使用自定义指令更好？
【发布时间】：2021-12-03 23:55:55
【问题描述】：

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

@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] 还是我的自定义指令更好？

【问题讨论】：

使用 elementref elementref-security-risk-angular-2 时存在安全风险，在这种情况下，您是在使用 elementref 修改 DOM，这是不好的。尝试使用Renderer2#setStyle。

标签： angular directive

【解决方案1】：

Directive - 添加样式会更复杂。里面的一些逻辑经常用到的指令。

但您只需要在此处进行样式设置。所以，如果您需要样式，请使用[ngStyle]，或者在您的情况下使用更多[style.width.%]="value"。

【讨论】：

顺便说一句，如果你想保留它的指令，只需使用HostBinding 进行内部属性更改。

【解决方案2】：

要直接在组件上更改样式，有两种方法HostBinding 或 Renderer2。如果您的 Input 发生变化，您需要每次使用 'Render2' 更新它，但使用 HostBinding 这是自动完成的，语法更简洁。

这就是为什么最好使用HostBinding

@Directive({
  selector: '[rq-column-size]'
})

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

【讨论】：

为什么更好？
@AT82 直接在组件上改变样式有两种方法HostBinding或Renderer2。但是如果您的输入发生变化，您必须每次使用 render2 更新它，但 HostBinding 会自动执行此操作，并且语法更简洁
好吧，我建议您在答案中更新它，而不是仅仅使用 最好使用... 没有任何解释:)