如何消除由AngularJS Material插入到头部的多个样式标签？

Question

AngularJS Material插入多个（大约30个）带有md-theme-style属性的样式标签。我猜这是一种性能调优，但我宁愿自己来做 - 我不需要外部框架以这种令人讨厌的方式污染我的HTML。你有什么想法如何摆脱这些样式标签吗？

- Yoorek

Answer 1

我不知道这是否值得麻烦。请备份您的工作，我没有测试过以下任何内容：

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

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

当加载到您的浏览器中时，这会动态地向页面文档添加许多CSS样式标签。要禁用它们，您需要使用以下命令重新编译angular-material：

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

这个问题提供了更多细节： 如何摆脱Angular Material额外的样式和它“强制”链接的CSS

- Robben_Ford_Fan_boy

---

我也遇到了同样的问题，我使用的是Grunt而不是Gulp，我该如何使用Grunt移除这些标签？ @Jared Hooper - Midhunsai

Answer 2

直接来自Angular Material文档

延迟生成主题

默认情况下，每个主题在定义时都会被生成。您可以在配置部分使用$mdThemingProvider禁用此功能。

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

这是我使用的确切语法，它像冠军一样工作。重要的是要注意，这并没有破坏我们的任何样式:

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

了解这一点似乎对Angular技术很有用。我也需要降低动画效果，因为默认设置会对几乎所有东西进行动画处理。

- Kraken

---

对我来说，这仍然创建了一些<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>但比以前少得多，谢谢！ - alistaircol

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.
});

答案基于这个问题。

- Jared Hooper