Javascript 角度-根据传入的变量更改组件/指令的大小

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

例如：

将产生一个尺寸为50px 50px的旋转器

将产生一个300px 300px大小的旋转器

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

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

component.html

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

<div class="loader" [ngStyle]="displaySize(size)"></div>

---

这很棘手，但可以做到

我通常做的是：

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

让我解释一下：我们从一个具有默认值的setter输入开始（这是不相关的）

---

当用户不使用small with

时，您要查找的内容称为

例如：

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

<p appHighlight>Highlight me!</p>

用法：

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

<p appHighlight>Highlight me!</p>

在尝试了@trichetriche给出的解决方案之后，我无法让它如我所希望的那样工作。因此，在思考了如何实现我想要的目标后，我终于解决了我的问题（优雅与否）


组件。ts

.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); }
}

export class SpinComponent  {
  @Input() size: string;

  displaySize(size: string) {
    switch (size) {
      case 'small':
        return this.getSize(50);
      case 'medium':
        return this.getSize(100);
      case 'large':
        return this.getSize(200);
      default:
        return this.getSize(100);
    }
  }

  getSize(num: number) {
      let myStyles = {
        'width': num + 'px',
        'height': num + 'px'
      };
      return myStyles;
  }  
}

.loader {
  border: 5px solid lightgrey;
  border-radius: 50%;
  border-top: 5px solid red;
  /*width: 25px;*/
  /*height: 25px;*/
  animation: spin 1s linear infinite;
}

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

component.html

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

<div class="loader" [ngStyle]="displaySize(size)"></div>

查找@Input和ngStyle或ngClass绑定。它们是框架模板选项的基本方面，也是一种解决方法。他要求用非常具体的语法编写选择器，而您正在为他提供另一种解决方案。我确实误解了这个问题。编辑了我的答案。感谢新的答案与问题无关，部分正确，即使没有改编……由于某种原因，我无法让它起作用。如果你能举一个stackblitz的例子吗？因为痛苦而投下一票是很悲哀的。如果这不是原因，那么请评论，以便我可以改进答案。我理解您对我的答案的担忧。这很符合他所描述的，似乎是想要的解决方案。很抱歉沟通不畅：）@JonathanStellwag没问题，我实际上是在回答你，而你删除了它，只是说你可以保留它，因为它可能会帮助其他人：我否决的原因是，如果其他用户有相同的问题，你的答案（作为一种变通方法）将在底部，而回答这个问题的答案是正确的（不一定是我的）我也包括在内。人们对否决票的反应通常过于严厉。我花了一点时间才意识到发生了什么，但我还是设法让事情运转起来。谢谢！下面是一个简单的例子，说明我的想法：@trichetriche我可以问一下，为div实现不同大小的定义是正确的，还是正确的e简化输入值的另一个技巧？可能是开关之类的东西？