Question

我有一个名为file-uploader组件的组件，看起来像是跟随。 HTML：

IncompleteAnnotationException

和css看起来像这样。

<label class="uploader" ondragover="return false;"
[class.loaded]="loaded" 
[style.outlineColor]="dragging ? activeColor : baseColor"
(dragenter)="handleDragEnter()"
(dragleave)="handleDragLeave()"
(drop)="handleDrop($event)">
<span *ngIf="!imageLoaded">{{label}}</span>
<img 
    [src]="imageSrc" 
    (load)="handleImageLoad()" 
    [class.loaded]="imageLoaded"/>
<input type="file" name="file" accept="image/*"
    (change)="handleInputChange($event)">

我可以通过以下方式从任何其他组件调用此组件。

/* File Uploader Styles  */
.uploader {
  -webkit-align-items: center;
  align-items: center;
  background-color: #efefef;
  background-color: white;
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
 /* height: 200px;*/
 width: 230.5px;
  height: 118.5px;
  -webkit-justify-content: center;
  justify-content: center;
  outline: 3px dashed #ccc;
  outline-offset: 5px;
  position: relative;
  min-width: 300px;
  margin-right: 10px;
  margin-left: 10px;

  input {
  display: none;
  }

  img {
    left: 50%;
    opacity: 0 !important;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*z-index: -1;*/
  }

  .icon {
    color: #eee;
    color: rgba(0, 0, 0, 0.2);
    font-size: 5em;
  }

  span{
    font-size: 1.5em;
    text-align: center;
  }

  img.loaded {
    opacity: 1 !important;
  }
}

.uploader img,
.uploader .icon {
  pointer-events: none;
}

.uploader,
.uploader span {
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  -ms-transition: all 100ms ease-in;
  -o-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

如何根据某些变量的某些条件或值从组件调用app-file-uploader时更改app-file-uploader的样式？

Answer 1

Angular没有提供任何修改CSS的方法，但你可以添加/删除一个类来应用不同的样式，具体取决于该类：

.uploader {
  -webkit-align-items: center;
  align-items: center;
  ...
  height: 200px;
  width: 230.5px;
  ...
}

.uploader.other {
  height: 400px;
  width: 461px;
}

<app-file-uploader class="uploader" [class.other]="someBoolean"  [label]="'DRAG & DROP YOUR SIGNATURE'"></app-file-uploader>

基于从另一个组件传递的参数设置组件样式

1 个答案: