Angular动态修改列宽时，使用ngStyle还是自定义指令更合适？

你实现的rq-column-size自定义指令核心逻辑为接收宽度数值，自动拼接百分比单位后赋值给宿主元素的宽度样式。两种方案没有绝对的优劣，可根据你的项目场景选择：

自定义指令更优的场景 #

如果你的项目满足以下任意条件，优先用你写的自定义指令：

• 多页面/多组件需要复用动态设置百分比单位的表格列宽逻辑：使用指令可以避免每个模板都重复写宽度值 + '%'的单位拼接逻辑，减少重复代码，也降低了写错单位的概率，同时模板语义化更强，看到[rq-column-size]就能直接知道这个绑定的作用是设置列宽。
• 后续有扩展列宽相关逻辑的需求：比如后续要加最小宽度限制、宽度变更事件通知、响应式适配调整宽度规则等，只需要修改指令内部代码即可，所有用到指令的地方自动生效，维护成本远低于ngStyle。

你写的自定义指令代码如下：

@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) { }
}

模板使用方式：

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

ngStyle更优的场景 #

如果你的项目满足以下任意条件，直接用ngStyle更合适：

• 仅单个页面/单个组件用到1~2次动态列宽逻辑：不需要额外封装维护指令文件，直接在模板写如下代码即可，实现成本更低：

<th [ngStyle]="{'width': col.width + '%'}" ....

• 列宽单位不固定，可能需要用px、vw等其他单位，或者同时需要绑定多个样式属性：ngStyle可以灵活处理多样式、多单位的场景，不需要为不同单位单独封装多个指令。

内容的提问来源于stack exchange，提问作者slacky82