19

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

4

3 回答 3

3

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

Angular-material 包含一些默认主题 css 作为 JavaScript 中的 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

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

于 2016-06-28T10:58:16.740 回答
3

直接来自角度材料文档

懒惰生成主题

默认情况下，每个主题都是在定义时生成的。您可以在配置部分使用$mdThemingProvider

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

这是我使用的确切语法，它像冠军一样工作。（重要的是要注意这也没有破坏我们的任何风格）：

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

知道这似乎是角度的标准也可能很有用。我也不得不关掉动画。默认情况下，他们几乎为所有内容设置动画。

于 2017-05-04T12:52:36.113 回答
0

我不确定这是否能回答问题，但要完全删除<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.
});

答案基于这个问题。

于 2016-06-28T22:29:55.070 回答