.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;
我想在这个控制器中 动态改变主题样式 可是注入这个Provider报错!应该怎么做?
我能想到的是(1)可以在.config()中$watch某个变量 来改变主题吗?
参考質問
最新の素材ソースコードを見てみましたが、以下の方法を使用したい場合は、やはり素材ソースコードを修正する必要があるようです。ソースコードを変更しない場合は、この回答を無視してください。
次のように試すことができます:
1. 参考質問の回答に従って資料のソースコードを変更します
2. 設定フェーズで、コントローラー用に $mdThemingProvider を登録します
リーリー3. コントローラーでテーマをリロードします
リーリーConfiguring of the default theme is done by using the $mdThemingProvider during application configuration.
公式サイトには、configurationで設定してくださいと書かれていました。
angular マテリアルには、ページ生成時にテーマがすでに与えられています。 たとえば、md-button が生成されると、それは md-button md-default-theme になります。 テーマを変更したい場合は、ページを移動して、md-default-theme を目的のテーマ md-dark-theme に置き換えます。
でも、これをやるのは面倒ですよね?
したがって、テーマを選択した後、新しいウィンドウでプレビューを開くのが最善です。
または、すべてのテーマがどのようなものかをリストする別のテーマ ページを用意します。 ただオプションを持ってください。結局のところ、元の Web サイトでインターフェイスをプレビューするのは非常に面倒なことです。