Angular Material inserisce più tag di stile (circa 30) con attributo md-theme-style. Immagino che sia una specie di messa a punto delle prestazioni, ma preferirei farlo da solo - non ho bisogno di framework esterni per inquinare il mio HTML in questo modo sgradevole. Qualche idea su come sbarazzarsi di questo?Come sbarazzarsi di più tag di stile inseriti alla testa da Angular Material?
risposta
Non so se valga la pena. Esegui il backup del tuo lavoro, non ho verificato nulla di tutto questo:
Angular-material include alcuni css del tema predefinito come variabile const in JavaScript. È possibile visualizzare il codice nel angular-material.js
in basso a partire dalla linea di:
angular.module("material.core").constant("$MD_THEME_CSS"...
Quando viene caricato nel browser questo aggiunge un sacco di tag di stile CSS in modo dinamico al documento pagina. Per disattivarle è necessario ricompilare angolare materiale da soli utilizzando i seguenti comandi:
git clone https://github.com/angular/material.git
quindi installare dipendenze:
cd material
npm install
Poi vai a gulp/util.js e cambio di line 53
da:
var jsProcess = series(jsBuildStream, themeBuildStream())
di essere:
var jsProcess = series(jsBuildStream)
quindi eseguire il processo di compilazione:
gulp build
Questa domanda fornisce maggiori dettagli: How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'
Non sono sicuro se questo risponde alla domanda, ma per rimuovere completamente tutti gli elementi del <style/>
In cima alla pagina, ho fatto quanto segue:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider, $provide) {
$mdThemingProvider.theme('myTheme')
.primaryPalette('blue')
.accentPalette('green')
.warnPalette('yellow');
$mdThemingProvider.generateThemesOnDemand(true);
$provide.value('themingProvider', $mdThemingProvider);
});
e questo ha rimosso con successo tutti gli elementi.
Ora, quando voglio loro generati, Io chiamo questo all'interno del controller principale:
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.
});
La risposta si basa su this question.
Direct from the angular material docs
pigro Genera Temi
Per impostazione predefinita, ogni tema viene generato quando definito. È possibile disattivare questo nella sezione di configurazione utilizzando il $mdThemingProvider
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
});
Ecco la sintassi esatta ho usato, e ha funzionato come un campione. (Importante notare questo non rompere qualsiasi stile per noi, sia):
.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.generateThemesOnDemand(true);
}])
Può anche essere utile sapere questo sembra essere uno standard per angolare. Ho dovuto abbassare anche le animazioni.Di default stavano animando praticamente tutto.
Per me questo ancora creato alcuni, '' '' ma molto meno di prima, grazie! – alistaircol
- 1. Tag audio, come gestirlo da Angular
- 2. Jquery aggiunge css alla testa
- 3. Angular Material 0.9.7 Esempio di convalida del modulo
- 4. Come sbarazzarsi dei fogli di stile CSS Drupal?
- 5. Testo del pulsante Tema utilizzando Angular Material Design
- 6. rimozione html, testa, tag body all'interno TinyMCE
- 7. Test di un evento click con Jasmine che aggiunge un foglio di stile alla testa
- 8. Le direttive di layout sono supportate da Angular 2 Material Design Components?
- 9. aggiungere solo uno script alla testa se non esiste
- 10. Richiamata OnChange per md-slider in Angular Material Design
- 11. Come sbarazzarsi di più colonne in un database?
- 12. di Polymer Paper Elements & Material angolare
- 13. Impostare lo stile del componente da variabile in Angular 2
- 14. Sbarazzarsi di valori Naz da panda dataframe
- 15. CakePHP: Includi js depositare nel colpo di testa da vista
- 16. Come analizzare tag html all'interno di string in angular js
- 17. Come sbarazzarsi di InvalidClassException SerialVersionUID?
- 18. Tag di intestazione stile con ripristino css
- 19. Testa di corrispondenza diversa da qualche modello
- 20. mostra l'attributo di stile tag in phpstorm
- 21. Tag stile stripping TinyMCE
- 22. Come sbarazzarsi di questa dipendenza circolare?
- 23. Come sbarazzarsi di derby.log, metastore_db da Spark Shell
- 24. Come sbarazzarsi di ZgotmplZ da html/template in Golang?
- 25. Sbarazzarsi di <arg0>
- 26. Git: TESTA vs testa
- 27. Come sbarazzarsi di <mvc: annotation-driven />?
- 28. Come sbarazzarsi di fastidiosi avvisi di binding HorizontalContentAlignment?
- 29. Yii2 caricamento di Jquery in testa alla pagina
- 30. Come modificare dinamicamente il tag di stile utilizzando JavaScript?
lo stesso problema si è verificato per me, iam utilizzando grunt invece di gulp, come posso rimuovere quei tag con grunt @ Jared Hooper – Midhunsai