Question

AngularJS Material使用md-theme-style属性插入多个（大约30个）样式标记。我想这是某种性能调整，但我宁愿自己做 - 我不需要外部框架来以这种讨厌的方式污染我的HTML。关于如何摆脱样式标签的任何想法？

Answer 1

我不知道这是否值得麻烦。请备份你的工作，我还没有测试过这些：

Angular-material包含一些默认主题css作为JavaScript中的const变量。您可以在底部的angular-material.js中查看此代码，从以下行开始：

angular.module("material.core").constant("$MD_THEME_CSS"...

加载到浏览器后，会向页面文档动态添加大量css样式标记。要禁用它们，您需要使用以下命令自行重新编译角度材料：

git clone https://github.com/angular/material.git

然后安装依赖项：

cd material
npm install

然后转到gulp / util.js并从：

更改行53

var jsProcess = series(jsBuildStream, themeBuildStream() )

是：

var jsProcess = series(jsBuildStream)

然后运行构建过程：

gulp build

这个问题提供了更多细节： How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'

Answer 2

Direct from the angular material docs

懒惰生成主题

默认情况下，定义时会生成每个主题。您可以使用$mdThemingProvider

在配置部分中禁用此功能

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
        //disable theme generation
        $mdThemingProvider.generateThemesOnDemand(true);
    });

这里是我使用的确切语法，它就像一个冠军。（重要的是要注意这并没有打破我们的任何风格）：

.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.generateThemesOnDemand(true);
}])

知道这似乎是角度的标准也可能是有用的。我不得不把动画也打倒了。默认情况下，它们几乎都是动画。

Answer 3

我不确定这是否回答了问题，但是为了完全删除页面顶部的所有<style/>元素，我执行了以下操作：

angular.module( 'myApp', ['ngMaterial'] )
   .config( function( $mdThemingProvider, $provide ) {
       $mdThemingProvider.theme('myTheme')
           .primaryPalette('blue')
           .accentPalette('green')
           .warnPalette('yellow');
       $mdThemingProvider.generateThemesOnDemand(true);
       $provide.value('themingProvider', $mdThemingProvider);
    });

并成功删除了所有元素。

现在，当我想要生成它们时，我在主控制器中调用它：

angular.module('myApp').controller('MyCtrl', function( themingProvider ){
    themingProvider.reload('myTheme'); 
    // pretty sure it's themingProvider.generateTheme('myTheme')
    // but I ended up refactoring this workaround out, anyway.
});

答案基于this question.

如何摆脱AngularJS Material插入的多个样式标签？

3 个答案: