javascript - Angular - 根据传入的变量更改组件/指令的大小

Question

我想在加载数据时显示一个微调器，但是，我希望能够拥有一些预定义的大小，我可以传入这些大小来更改显示的微调器的大小。

例如:

<spinner small> would produce a spinner of size 50px x 50px
<spinner large> would produce a spinner of size 300px x 300px

有什么办法可以做到这一点吗？

到目前为止，我有一个带有代码的标准微调器:

组件.html

<div class="loader middle"></div>

组件.css

.loader {
  border: 16px solid lightgrey;
  border-radius: 50%;
  border-top: 16px solid red;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Answer 1

这很棘手，但可以做到。

我通常做的事情如下:

this.size = '120px';
@Input('small') set small(value = 'foo') { // default value is irrelevant
  this.size = !value ? '50px' : this.size;
}

让我解释一下:我们从具有默认值(不相关)的 setter 输入开始。

当用户不使用小号 <app-spinner small></app-spinner> 时，该值将是默认值(此处为“foo”)。

如果用户输入小属性，则该值变为'' ，这是假的。

所以我们测试一下:如果该值是假的，那么我们将该值设置为 50px。如果没有，我们保留默认值 120px。

在你的微调器中，使用这个:

<div class="loader" [ngStyle]="{width: size, height: size}"></div>

here is a working demo on stackblitz