Question

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

例如：

The ALTER TABLE statement conflicted with the FOREIGN KEY constraint "FK_dbo.DriverWorks_dbo.WorkPages_WorkPageId". The conflict occurred in database "{dblocation}\KHORSHIDDATA.MDF", table "dbo.WorkPages", column 'Id'.将产生大小为50px x 50px的微调器
<spinner small>将产生尺寸为300px x 300px
的微调框

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

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

component.html

<spinner large>

component.css

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

Answer 1

这很棘手，但是可以做到。

我通常做的是以下事情：

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

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

如果用户在<app-spinner small></app-spinner>中不使用小号，则该值为默认值（此处为'foo'）。

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

因此，我们测试：如果该值是伪造的，则将其设置为50px。如果没有，我们保留默认值120px。

在微调器中，使用此：

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

here is a working demo on stackblitz

Answer 2

您要查找的内容称为 Attribute Directive 。

例如：

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>

如果您使用的是Angular CLI，则可以通过执行以下命令轻松生成新指令：

ng generate directive highlight

Answer 3

尝试了@trichetriche给出的解决方案后，我无法按我希望的那样运行它。因此，在考虑了如何实现自己想要的目标之后，我就设法解决了我的问题（无论是否优雅）。

Stackblitz

component.ts

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

component.html

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

component.css

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

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

3 个答案: