以角度动态加载材质主题

Question

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

但是,当后端响应主题信息时,我无法进入系统.允许您设置主题的$ mdThemingProvider似乎不能从Controller内部获得,并且$ mdTheming服务本身没有用于修改系统中主题的选项.

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

Answer 1

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

首先，修改 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(function($provide, $mdThemingProvider) { $provide.value('themeProvider', $mdThemingProvider); // 现在你可以注入提供程序 })

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

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

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