ngClass - 根据@input 动态添加 class 名称

Question

我想根据输入参数动态添加 class，但前提是输入是 'approved' 字符串。

我有一个带有输入和 class 数组的组件，我想从中检查输入：

@Input() modalSize?: string;
sizeClassList = ['xs', 'small', 'medium', 'large', 'xl'];

我在组件中试过以下方法：

sizingMethod() {
  const isValid = this.sizeClassList.indexOf(this.modalSize) >= 0;
  if (isValid) {
    return 'modal__dialog--' + this.modalSize;
  }
}

模板内：

<div class="modal__dialog" [ngClass]="sizingMethod()"> ... </div>

基本上我想根据输入添加额外的尺寸 class，用户只需输入尺寸。

如果用户输入[modalSize]="small"，添加的class将是'modal__dialog--small'，如果用户输入[modalSize]="derp"，则没有class 将添加。

解决这个问题的好方法是什么？

*编辑：标题编辑得更清楚

Answer 1

您的方法是正确的，但还可以稍作改进：

export type Size = 'xs' | 'small' | 'medium' | 'large' | 'xl';
const sizeClassList: Array<Size> = ['xs', 'small', 'medium', 'large', 'xl'];

export class YourComponent implements OnInit, OnChange {
  @Input() modalSize: Size;
  modalClassName: string;

  ngOnInit() {
    this.updateModalSize();
  }

  // on input change event
  ngOnChange() {
    this.updateModalSize();
  }

  private updateModalSize() {
    const isValid = sizeClassList.includes(this.modalSize);
    return 'modal__dialog--' + (isValid ? this.modalSize : 'medium');
  }
}

在模板中：

<div class="modal__dialog" [ngClass]="modalClassName"> ... </div>

当您执行类似 [ngClass]="sizingMethod()" 的操作时，尤其是在没有 ChangeDetectionStrategy.OnPush 的情况下，每次 Angular 检测到更改时都会调用该方法，因此性能可能很差。

ngClass - 根据@input 动态添加 class 名称

ngClass - Dynamically add class name based on @input

ng-class

angular