angulaire.js - $mdThemingProvider ne peut pas être utilisé dans le contrôleur

Question

.config(CoreTheme)

function CoreTheme($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('blue',{
            'default'   :   '500',
            'hue-1'     :   '900',
            'hue-2'     :   'A100',
            'hue-3'     :   '400'
        })
        .accentPalette('green',{
            'default'   :   '600',
            'hue-1'     :   '900',
            'hue-2'     :   'A100',
            'hue-3'     :   '400'
        })
        .warnPalette('deep-orange',{
            'default'   :   '500',
        });
    $mdThemingProvider.alwaysWatchTheme(true)
}

CoreTheme.$inject = ['$mdThemingProvider'];

export default CoreTheme;

module.js

export default angular.module('theme',['ngMaterial']);

controller.js

class ThemeCtrl{
    constructor($scope,$rootScope,$mdThemingProvider){
   
        $scope.changeTheme = changeTheme;


        function changeTheme(theme_name){
            $mdThemingProvider.theme('default').dark()
        }
    }
}

ThemeCtrl.$inject = ['$scope','$rootScope','$mdThemingProvider'];

export default ThemeCtrl;

Je souhaite changer dynamiquement le style du thème dans ce contrôleur, mais lorsque j'injecte ce fournisseur, j'obtiens une erreur ! Que faut-il faire ?
Ce à quoi je peux penser, c'est (1) Puis-je $watch une variable dans .config() pour changer le thème ?

Answer 1

Question de référence
Je viens de regarder le dernier code source du matériel. Il semble qu'il n'y ait pas de fonction de rechargement. Si vous souhaitez utiliser la méthode suivante, vous devez toujours modifier le code source du matériel. Si vous ne modifiez pas le code source, veuillez ignorer cette réponse.

Vous pouvez l'essayer comme suit :
1.Modifiez le code source du matériel en fonction des réponses aux questions de référence

2. Dans la phase de configuration, enregistrez $mdThemingProvider pour une utilisation par le contrôleur

angular.module("yourModule",['whateverDependencies']).config(
function($provide, $mdThemingProvider) { 
    $provide.value('themeProvider', $mdThemingProvider); 
})

3. Rechargez le thème dans le contrôleur

.controller('someController', function(themeProvider, $injector) {         
  themeProvider.theme('default').dark();
  themeProvider.reload($injector);
}

Answer 2

Configuring of the default theme is done by using the $mdThemingProvider during application configuration.
Le site officiel dit, veuillez le configurer dans configuration.

le matériel angulaire a déjà donné un thème lors de la génération de la page. Par exemple, une fois le bouton md généré, il s’agit du thème md-default md-button. Si vous souhaitez modifier le thème, vous pouvez parcourir la page et remplacer md-default-theme par le thème souhaité, md-dark-theme.

Mais c'est fatiguant, non ?

Il est donc préférable d'ouvrir un aperçu dans une nouvelle fenêtre après avoir sélectionné un thème.
Ou il existe une page de configuration de thème distincte qui répertorie à quoi ressemblent tous les thèmes. Ayez juste des options. Après tout, prévisualiser l’interface sur le site Web d’origine est une chose très ennuyeuse.