zoukankan      html  css  js  c++  java
  • [Angular] Lazy Load CSS at runtime with the Angular CLI

    Ever had the need for multiple "app themes", or even to completely dynamically load CSS based on which customer logs into your application? You could of course bundle all of the various themes into a single CSS entry file, but your application size would suffer a lot. Therefore, in this lesson we're going to have a look how to define multiple entry-level CSS files and how to "lazy load" them at runtime.

    Source: https://egghead.io/lessons/angular-lazy-load-css-at-runtime-with-the-angular-cli

    For example we want to lazy load two theme file: 'client-a-style.scss', 'client-b-style.scss':

    In angular.json:

    "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/dyncss",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "aot": false,
                "assets": ["src/favicon.ico", "src/assets"],
                "extractCss": true,
                "styles": [
                  "src/styles.scss",
                  {
                    "input": "src/client-a-styles.scss",
                    "bundleName": "client-a",
                    "inject": false
                  },
                  {
                    "input": "src/client-b-styles.scss",
                    "bundleName": "client-b",
                    "inject": false
                  }
                ],
                "scripts": []
              },
    

      

    After you do `ng build --prod`, it will generate two css files: 'client-a.css' and 'client-b.css'.

    Then we can do lazy load when button click:

    import { Component, Inject, Renderer2 } from '@angular/core';
    import { DOCUMENT } from '@angular/common';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      title = 'dyncss';
      // reference document
      constructor(@Inject(DOCUMENT) private document: Document) {}
    
      loadStyle(styleName: string) {
        // get head
        const head = this.document.getElementsByTagName('head')[0];
    
        // create link tag to load css
        let themeLink = this.document.getElementById(
          'client-theme'
        ) as HTMLLinkElement;
        if (themeLink) {
          // if the link is already exist, we just replace the link source
          themeLink.href = styleName;
        } else {
          // if link doesn't exist, we create link tag
          const style = this.document.createElement('link');
          style.id = 'client-theme';
          style.rel = 'stylesheet';
          style.href = `${styleName}`;
    
          head.appendChild(style);
        }
      }
    }
    
    <button type="button" (click)="loadStyle('client-a.css')">
      Load client style a
    </button>
    <button type="button" (click)="loadStyle('client-b.css')">
      Load client style b
    </button>
    

      

  • 相关阅读:
    数据库MySQL技术-基础知识
    NC文件的处理【netcdf】
    设计模式-策略模式---Strategy(对象行为型)
    final修饰的变量是引用不能改变,还是引用的对象不能改变
    Spring之配置文件加载方式
    hibernate的基础学习--多表关联数据查询
    hibernate的基础学习--多对多关联
    hibernate的基础学习--一对一关联
    hibernate的基础学习--一对多关联
    hibernate的基础学习
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11395027.html
Copyright © 2011-2022 走看看