以角度动态加载材质主题

Question

我正在使用 Angular Material 构建一个 Angular 应用程序。应用程序的第一步是用户登录。接下来，系统从后端加载该用户公司制作的主题。

但是，当后端响应主题信息时，我无法将其输入系统。允许您设置主题的 $mdThemingProvider 似乎在 Controller 内部不可用，并且 $mdTheming 服务本身没有用于修改系统中主题的选项。

有没有办法将新主题动态加载到 Angular Material 应用程序中？

Answer 1

我也遇到过类似的情况，CSS 为我们提供了一个名为 var() 的功能，它允许我们在运行时更改 CSS 元素的属性。 更多详情请查看我的博客here，希望对您有所帮助

Answer 2

<your_module>.config(function ($mdThemingProvider, $provide) {
     $provide.value('$mdThemingProvider', $mdThemingProvider);
});

现在您可以在您的控制器中注入$mdTheming 和$mdThemingProvider 并将以下代码插入您的控制器中。

$mdThemingProvider.theme(<theme_name>).primaryPalette(<primary_color>).accentPalette(>accent_color>);
$mdTheming.generateTheme(<theme_name>);

如果您希望这是您的默认主题，那么：

$mdThemingProvider.setDefaultTheme(<theme_name>);

或在 HTML 中使用 md-theme="<theme_name>"。

PS：适用于 Angular Material 1.1 及更高版本。

Answer 3

以下内容对我有用，全部归功于 Guilhermecvm，但是我将添加来自 Github issue 的代码，以防谷歌将其他人带到这里

angular.module('app')
.config(['$mdThemingProvider', '$provide', function($mdThemingProvider, $provide) {
    $mdThemingProvider.generateThemesOnDemand(true);
    $provide.value('themeProvider', $mdThemingProvider);
}])

.controller('AppController', ['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) {
    //create new theme
    themeProvider.theme('default')
      .primaryPalette('pink')
      .accentPalette('orange')
      .backgroundPalette('yellow');

    //reload the theme
    $mdTheming.generateTheme('default');

    //optional - set the default to this new theme
    themeProvider.setDefaultTheme('default');
}]);

为避免“尝试使用未注册的主题”警告，应将主题添加到 mdTheming 内部主题列表中

var theme = themeProvider.theme...
$mdTheming.THEMES[themeName] = theme;

Answer 4

从 angular-material 1.0.5 版开始：

1. 添加

   reload: generateTheme 
   

   在 themingProvider 函数中（angular-material.js 第 4840 行 - generateTheme 函数已经存在于 angular-material.js 中，我们只需要一种调用它的方法）

2. 在配置函数中：

   angular.module('my-module').config(function ($provide, $mdThemingProvider) {
    $mdThemingProvider.generateThemesOnDemand(true);
    $provide.value('themeProvider', $mdThemingProvider);});
   

3. 在您的控制器中，注入 themeProvider，现在您可以执行以下操作：

   //create new theme
   themeProvider.theme('custom')
     .primaryPalette('pink')
     .accentPalette('orange')
     .backgroundPalette('yellow');
   
   //reload the theme
   themeProvider.reload('custom');
   
   //optional - set the default to this new theme
   themeProvider.setDefaultTheme('custom');
   

Answer 5

现在这更容易了。你只需要省略第一步。在简历中：

1. 在themingProvider函数(angular-material.js)中添加reload: generateThemes

2. 将提供程序提供给您的控制器：

   $provide.value('themeProvider', $mdThemingProvider);

3. 使用 themeProvider 在控制器中创建主题

4. 使用themeProvider.reload($injector);重新加载主题

Answer 6

我已设法通过对提供程序进行一些小的更改来解决此问题。允许更改主题：

首先，修改angular-material.js中的generateThemes函数，设置generationIsDone = false。

这将允许您在以后重新生成主题。

function generateThemes($injector) {
    var styles = $injector.has('$MD_THEME_STYLESHEETS') ? $injector.get('$MD_THEME_STYLESHEETS') : [];
    if (styles) {
        var $q = $injector.get('$q');
        var $http = $injector.get('$http');
        var calls = [];

        angular.forEach(styles, function(style){
            calls.push($http.get(style));
        });

        $q.all(calls).then(function(responses) {
            var css = '';
            angular.forEach(responses, function(response) {
                css += response.data;
            });
            generationIsDone = false; // here
            generateCss(css);
        });
    } else {
        var css = $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : '';
        generationIsDone = false; // here 
        generateCss(css);
    }
}

其次，将 generateThemes() 函数作为 ThemingService 上的属性提供。

您可以在添加新主题时调用它来生成它们的 CSS。

  ThemingService.$inject = ["$rootScope"];
  return themingProvider = {
    definePalette: definePalette,
    extendPalette: extendPalette,
    theme: registerTheme,

    setDefaultTheme: function(theme) {
      defaultTheme = theme;
    },
    alwaysWatchTheme: function(alwaysWatch) {
      alwaysWatchTheme = alwaysWatch;
    },
    reload: generateThemes, // here
    $get: ThemingService,
    _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,
    _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,
    _PALETTES: PALETTES,
    _THEMES: THEMES,
    _parseRules: parseRules,
    _rgba: rgba
  };

第三，要真正使 ThemingProvider 可用于您的控制器，请将其作为值添加到您的模块中。

angular.module("yourModule",['whateverDependencies']) .config(函数($provide, $mdThemingProvider) { $provide.value('themeProvider', $mdThemingProvider); // 现在你可以注入提供者了 })

最后，在您需要的地方，只需调用控制器中的值：

}).controller('someController', function(themeProvider, $injector) {         

 themeProvider.theme('someNewTheme').primaryColor('orange').accentColor('pink');
  themeProvider.reload($injector);
}