응용 프로그램이로드 될 때 16 진수로 전달 된 CSS 값을 동적으로 변경합니다.

내 응용 프로그램이 리디렉션에 의해 초기화됩니다. 응용 프로그램 URL에 첨부 된 쿼리 매개 변수가 있으므로 응용 프로그램로드시 해당 URL을 검색하여 사용해야합니다. 매개 변수 중 하나는 응용 프로그램의 기본 색 테마를 제어하는 데 적용해야하는 16 진수 값입니다. 현재 ActiveRoute queryParams를 사용하여 매개 변수를 가져와 사용하고 있습니다.응용 프로그램이로드 될 때 16 진수로 전달 된 CSS 값을 동적으로 변경합니다.

다른 SASS 파일과 함께 theme.scss라는 파일에 색상을 적용하고 모든 스타일을 스타일 태그의 DOM에 추가하는 기본 앱 구성 요소로 가져옵니다.

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

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

변수 $ 차 빛이 적용 리디렉션에서 들어오는 16 진수 값을 필요로하는 변수입니다 다음과 같이

내 스타일이 기본적으로 적용됩니다. 그래서 그것은 실제로 어떤 색깔이 될 수 있습니다.

어떻게 이런 종류의 동작을 수행 할 수 있습니까? 어떤 조언을 주셔서 감사합니다.

업데이트 : 다음

는 내가하고 싶은 것입니다. 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