Angular 加载应用程序时，使用十六进制颜色动态更改CSS值

我的应用程序由发生的重定向初始化。应用程序url附带了查询参数，我必须在应用程序加载时检索并使用这些参数。其中一个参数是十六进制值，必须应用该值来控制应用程序的主颜色主题。目前，我正在使用ActiveRoute queryParams获取参数并使用它们

我正在将一个名为theme.scss的文件中的颜色与我的其他SASS文件一起应用，并导入到我的主应用程序组件中，该组件将所有这些样式添加到样式标记中的DOM中

我的风格基本应用如下：

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

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

变量$primary light是需要从应用于它的重定向中输入十六进制值的变量。所以它可以是任何颜色

我怎样才能实现这种行为？谢谢你的建议

更新：

<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);
      });
    }
  };
};

这是我想做的。对于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);
      });
    }
  };
};

---

SASS/SCSS被编译成CSS，因此无法动态更改变量的内容，因为CSS没有变量

但目前我认为可能的解决方案是：

案例1:
手头有要编辑的文件

将这些变量存储为字符串，并使用

.replace（）

搜索和替换变量/值

输出此字符串，然后开始编译css

案例2:
使用相同的

.replace（）

直接搜索并替换css文件（如果可能）

一旦完成上述步骤之一，则只应开始页面加载

或者是你的思想食粮

---

有没有办法在javascript中的其他地方声明颜色属性，而不是在SCSS文件中声明颜色属性？有几种方法。请告诉我您的具体情况，以便我可以相应地告诉您解决方案！我用Angular 1中的方法更新了帖子。我正在尝试用angular two解决这个问题，但还没有成功。我试图用我在博客中找到的一些方法来模拟插值。我不确定您是否对ngStyle有任何想法，但我不想这样做，因为这意味着我必须将此绑定添加到需要使用该变量的每个位置，因此它是不可伸缩的。至少有了上面的指令，我能够将所有样式保留在body标记中，而不是将它们拆分到所有不同的组件中。