以角度动态加载材质主题

本文介绍了以角度动态加载材质主题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在使用 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:

添加

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屋！