Question

我想基于输入参数动态添加一个类，但前提是输入是经过批准的＆＃39;字符串。

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

@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] =＆＃34; small＆＃34;，则添加的课程将为＆＃39; modal__dialog - small＆＃39;如果用户输入[modalSize] =＆＃34; derp＆＃34;，则不会添加任何课程。

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

*编辑：标题编辑更清晰

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动态添加类名

1 个答案: