ngClass - 基于@input动态添加类名

Question

我想基于输入参数动态添加一个类，但前提是输入是'已批准'字符串。

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

@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>

基本上我想基于输入添加额外的大小调整类，用户只需要输入大小。

如果用户输入[modalSize] =“small”，则添加的类将为'modal__dialog - small'，如果用户输入[modalSize] =“derp”，则不会添加任何类。

有什么好办法可以解决这个问题？

*编辑：标题编辑更清晰

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检测发生变化时都会调用该方法，因此它的性能会很差。