アプリケーションの読み込み時に16進数で渡されたCSS値を動的に変更します。

リダイレクトによってアプリケーションが初期化されます。アプリケーションURLにはクエリパラメータが添付されており、アプリケーションが読み込まれたときにそれらを取得して使用する必要があります。パラメータの1つは、アプリケーションの原色テーマを制御するために適用する必要がある16進値です。現在、ActiveRouteのqueryParamsを使用してパラメータを取得しています。アプリケーションの読み込み時に16進数で渡されたCSS値を動的に変更します。

他のSASSファイルでtheme.scssというファイルに色を適用しています。メインのアプリケーションコンポーネントにインポートされ、これらのスタイルがすべてスタイルタグのDOMに追加されています。次のように

私のスタイルは基本的に適用されます。

.sidebar-left-item.active { 
    background-color: $pirmary-light; 
} 

.btn-pirmary-light { 
    background-color: $pirmary-light; 
}

変数$プライマリ光がそれに適用されるリダイレクトから入ってくる進値を必要とする変数です。だから本当にどんな色でもかまいません。

どうすればこのような動作を実現できますか？アドバイスありがとう。

更新：

ここでは、私がやりたいものです。 Angular 1では、以下のことをする指示文を作成しました。私はそれをindex.htmlのbodyタグに追加して、バインディングを処理し、有効なCSSルールをスタイルタグに残します。これにより、実行時にプロパティを適用することができました。

HTLM：

<dynamic-styles id="dynamic-styles" class="ng-cloak"> 

    #ad-container:before { 
    background-color: {{ design.bgAlph }}; 
    } 

</dynamic-styles>

角度指令：

dynamicStyles = function($interpolate, $timeout) { 
    return { 
    restrict: 'AE', 
    link: function(scope, element) { 
     $timeout(function() { 
     var domElement = element[0]; 
     // General interpolation digest cycle will take part after the directive 
     // is executed. Separate text interpolation allows not to wait for it, 
     // and apply dynamic styles as soon as possible. 
     var interpolatedFn = $interpolate(goog.dom.getTextContent(
      domElement)); 
     goog.dom.setTextContent(domElement, ''); 
     var styleElement = goog.dom.createElement(goog.dom.TagName.STYLE); 
     goog.dom.setTextContent(styleElement, interpolatedFn(scope)); 
     goog.dom.appendChild(document.head, styleElement); 
     }); 
    } 
    }; 
};

出典

2017-02-05 Aaron