时间戳

首页 > 解决方案 > Angular - 根据传入的变量更改组件/指令的大小

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

问题描述

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

例如：

<spinner small>将产生一个大小为 50px x 50px
<spinner large>的微调器 将产生一个大小为 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); }
}

标签： javascripthtmlangulartypescript

解决方案

这很棘手，但可以做到。

我通常做的是以下几点：

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

让我解释一下：我们从一个具有默认值（无关紧要）的 setter 输入开始。

当用户不使用 small with 时<app-spinner small></app-spinner>，该值将是默认值（此处为 'foo'）。

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

所以我们测试一下：如果值是假的，那么我们将值设置为 50px。如果不是，我们保持默认值 120px。

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

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

这是关于 stackblitz 的工作演示

推荐阅读