Question

这是Angular中的主要index.html文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tomato</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我有不同的html模板集，一套用于管理面板，另一套用于前端。模板具有不同的css和js文件集。所有的css和js文件都位于<head>部分。

我希望通过基于面板（管理员或面板）进行切换，将index.html文件的<head>中包含的css / js文件包含在内。

为此，我在app.component.ts文件中编写了以下代码

ngOnInit() {

    var dynamicAdminCSS = [
        "assets/admin_assets/css/bootstrap-cerulean.min.css",
        "assets/admin_assets/css/charisma-app.css",
        "assets/editor/editor.css"
    ];

    var dynamicAdminJS = [
        "assets/admin_assets/js/bootstrap-cerulean.min.js",
        "assets/admin_assets/js/charisma-app.js",
    ];

    var dynamicFrontCSS = [
        "assets/front_assets/css/code-snippet.min.css",
        "assets/front_assets/css/custom-app.css",
    ];

    var dynamicFrontJS = [
        "assets/front_assets/js/snippet.min.js",
        "assets/front_assets/js/custom.js",
    ];

    if(this.location.path().indexOf('/admin') > -1){

      for (var i = 0; i < dynamicAdminCSS .length; i++) {
        let cssNode       = document.createElement('link');
        cssNode.rel       = 'stylesheet';
        cssNode.type      = 'text/css';
        cssNode.href      = dynamicAdminCSS [i];
        cssNode.media = 'all';
        document.getElementsByTagName('head')[0].appendChild(cssNode);
      }

      for (var i = 0; i < dynamicAdminJS .length; i++) {
          let jsNode      = document.createElement('script');
          jsNode.type     = 'text/javascript';
          jsNode.src      = dynamicAdminJS [i];
          jsNode.async    = false;
          jsNode.charset  = 'utf-8';
          document.getElementsByTagName('head')[0].appendChild(jsNode);
      }
    }
    else {
      for (var i = 0; i < dynamicFrontCSS .length; i++) {
        let cssNode       = document.createElement('link');
        cssNode.rel       = 'stylesheet';
        cssNode.type      = 'text/css';
        cssNode.href      = dynamicFrontCSS [i];
        cssNode.media = 'all';
        document.getElementsByTagName('head')[0].appendChild(cssNode);
      }

      for (var i = 0; i < dynamicFrontJS .length; i++) {
          let jsNode      = document.createElement('script');
          jsNode.type     = 'text/javascript';
          jsNode.src      = dynamicFrontJS [i];
          jsNode.async    = false;
          jsNode.charset  = 'utf-8';
          document.getElementsByTagName('head')[0].appendChild(jsNode);
      }
    }
  }

我面对的唯一问题是，在浏览器中查看项目时，页面在加载过程中扭曲了半秒钟，然后在加载css / js之后又恢复了所需的外观。

在不同的css / js文件集之间切换是否有更好的方法？

如何使用Angular 2+在管理面板和前端的不同CSS / JS文件集之间进行切换？

0 个答案: