別のコンポーネントから引き渡された引数に基づいてコンポーネントのスタイルを設定する

Question

私は以下のようなファイルアップローダーコンポーネントを持っています。 HTML：

<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)"> 

とCSSは次のようになります。

/* 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 [label]="'DRAG & DROP YOUR SIGNATURE'"></app-file-uploader> 

いくつかの変数のいくつかの条件または値に基づいて構成要素からそれを呼び出すときにどのように私はアプリ-ファイルアップローダーのスタイルを変更できますか？

Answer 1

角度が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>