以角度动态加载材质主题 [英] Dynamically loading a material theme in angular

问题描述

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

I'm building an Angular application using Angular Material. One of the first steps in the application is that the user logs in. Next, the system loads from the backend the theme made by that user's company.

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

However, when the backend responds with the Theme information, I am not able to get it into the system. The $mdThemingProvider, which allows you to set themes, does not seem to be available from inside a Controller and the $mdTheming service itself does not have options for modifying the themes in the system.

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

Is there any way to dynamically load new themes into an Angular Material application?

推荐答案

从 angular-material 1.0.5 版本开始:

As of version 1.0.5 of angular-material:

1. 添加

reload: generateTheme 

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

in themingProvider function (angular-material.js line 4840 - the generateTheme function is already present in angular-material.js, we just need a way to call it)

在配置函数中:

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

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

In your controller, inject themeProvider and now you can do something like:

//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');

这篇关于以角度动态加载材质主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！