angularjs - 以 Angular 动态加载 Material 主题

Question

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

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

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

Answer 1

从 angular-material 的 1.0.5 版开始:

添加

reload: generateTheme 

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

在配置函数中:

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

在您的 Controller 中，注入(inject) 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');