web-dev-qa-db-ja.com

変数angularに基づいて動的なCSSを生成します

私はangular 4で開発された管理パネルに取り組んでおり、色の変更、bgなどのスタイルをカスタマイズするセクションを統合しようとしています。データベースに設定を保存するセクションを既に開発しました。 APIを使用するJSON。

今、私はjsonからの値を使用して動的なCSSを生成しようとしています、メインコンポーネントで次のコードを試しましたが、動作していません

@Component({
      templateUrl: 'card.html',
      styles: [`
        .card {
          height: 70px;
          width: 100px;
          color: {{css.cardColor}};
        }
      `],
})

コンポーネントにCSS値をロードし、スタイルタグで使用する方法がわかりません。私は同じための他のソリューションを見つけることができませんでした。

別の方法はangularアニメーションの概念を使用することですが、CSSは巨大になるため、トリガーとすべてを使用してangularアニメーションで全体を実装することはできません。これは真の要件であり、他の多くの開発者が行うべきであったため、これに対する解決策があると思います。

すべてのヘルプはかなりのものです。

編集：特定の要素だけでなく、アプリケーション全体として、ほぼすべての要素に適用されるngStyleを使用できません。

javascriptcssangulartypescriptangular2-template
20
Vikram

さまざまな方法を試し、angularアプリのすべてのページに動的なcssを追加するようにアプローチした後、次の解決策を見つけました。

要件：から返された値とAPIに基づいて動的なCSSを生成し、デザインとスタイルを変更します。

解決 ：

  1. 新しいコンポーネントを作成し、APIから動的なcss変数を読み込むサービスを作成します。
  2. テンプレートファイルにスタイルタグを追加し、プロパティに変数値を使用します。
  3. このテンプレートをすべてのページまたはメインテンプレートにロードします。
  4. アプリのビルドスタイルはheadタグに移動されます。

コードサンプル

import { CssService} from './Css.service';

@Component({
  selector: 'DynamicCss',
  templateUrl: './DynamicCss.component.html',
  styleUrls: ['./DynamicCss.component.scss']
})
export class ServiceProviderComponent implements OnInit {
    cssVariables: any;
    constructor(private cssService:CssService){
        /* call the service/api to get the css variable values in cssVariables */

    }
}

次のような関数の助けを借りて、jqueryまたはjavascriptを使用してcssを適用してcssを追加します

appendCss(customData)
{
     let text = '.custom-form-1 {
            background-image: url("`+customData.background_image+`");
         }';
     $(document).ready(function(){
         $("style").append(text);
      });
}

そして、私がやったようにサービスや他の変数からカスタムデータをロードした後にこの関数を呼び出しますngOnInit

ngOnInit(){
 this.appendCss(this.customizeFormData);
}

Jqueryを使用していますが、angularアプリでjqueryを使用したくない場合は、javascript/TypeScriptでも実行できます。

その他の有用なリソース https://github.com/angular/angular/issues/9343#issuecomment-312035896

15
Vikram

ngStyleを使用して、jsonからCSSを動的にページに追加できます。

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div>

同じ別の例は

 <div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover'  }"></div>

ここで私はjsonから背景画像をロードしました

16
Ajinkya Dhote

バインドできるのはstyle.colorのみです：

<div class="card" [style.color]=cardColor>lorem ipsum</div>
5
Eliseo

ngClass は、以下のように変数値の動的クラスの基準を設定するために使用されます

Tsファイルコンポーネント：

@Component ({
    selector:'simple-comp',
    template:`   <ol class="breadcrumb">
        <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
        <li *ngClass="{'active': step==='step2'}"  (click)="step='step2'">Step2</li>
        <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
       </ol>`
})

export class SimpleComponent {
    public step: string = 'step1'; // change value like step1, step2, step3
}

HTMLコード：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">
 ...
</some-element>
3
Rohan Fating

私はそれが適用可能であると言っているわけではありませんが、angular/flex-layoutライブラリはスタイルの多くの操作を行います。

ディレクティブ、サービス/依存性注入を利用することを忘れないでください。

たとえば、フレックスレイアウトライブラリには、関連する可能性のあるいくつかの便利なクラスがあります。

StyleUtils 、 StyleDirective 、 MatchMedia （スタイルシートタグを動的に作成）

0
Simon_Weaver