使用外部CSS在Angular 2应用程序中实现主题_Css_Angular_Angular2 Routing_Typescript1.5

使用外部CSS在Angular 2应用程序中实现主题

css angular

使用外部CSS在Angular 2应用程序中实现主题,css,angular,angular2-routing,typescript1.5,Css,Angular,Angular2 Routing,Typescript1.5,尝试实现Angular 2应用程序，其中我正在从下拉列表中选择一个主题，一旦我选择了新主题，整个应用程序的主题应该会改变我正在考虑将主题名（sea.css）存储在本地存储中，并替换为当前主题（amber.css），但问题是和整个应用程序相关联的主题放在main-index.html文件中，所以并没有办法替换它，所以它是可变的试图找到一个解决方案来实现此功能应用程序结构是应用程序 |--main.ts |--app.component.ts |--设置组件 |--设置.component

尝试实现Angular 2应用程序，其中我正在从下拉列表中选择一个主题，一旦我选择了新主题，整个应用程序的主题应该会改变

我正在考虑将主题名（sea.css）存储在本地存储中，并替换为当前主题（amber.css），但问题是

和整个应用程序相关联的主题放在main-index.html文件中，所以并没有办法替换它，所以它是可变的

试图找到一个解决方案来实现此功能

应用程序结构是

index.html

<html>
  <head>

    <base href="/">  
    <title>Workshop Scheduler </title>
    <meta charset="UTF-8">
    <!--Related Stylesheets-->

    <link rel="stylesheet" href="resources/styles/plugins.css">
    <link rel="stylesheet" href="resources/styles/main.css">

    <!-- **This theme is applied to the whole app**     -->

    <link rel="stylesheet" href="resources/styles/fire.css">

    <link rel="stylesheet" href="resources/styles/themes.css">


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- Configure SystemJS -->    
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/main.js')
            .catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>

        <app-start>Loading...</app-start>

  </body>
</html>

 <div id="page-wrapper">
    <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animation">

        <div id="main-container">
            <div id="page-content">    
                <ul class="breadcrumb breadcrumb-top">
                    <li>Manage</li>
                    <li><a href="">My Settings</a></li>
                </ul>

                <div class="block full">
                    <div class="block-title">
                        <h2><strong>Settings</strong></h2>
                    </div>
                    <div class="form-horizontal form-bordered">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Username</label>
                            <div class="col-xs-9">
                                <p class="form-control-static">{{userData.fName}} {{userData.lName}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label testColor" for="user-settings-email">Email</label>
                            <div class="col-xs-9">
                                <p class="form-control-static">{{userData.email}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label" for="inputTheme">theme</label>
                            <div class="col-xs-9">
                                <select class="form-control" name="inputTheme" id="inputTheme" (change)="changeTheme($event.target.value)">
                                    <option value="ocean.css">Ocean</option>
                                    <option value="main.css">Main</option>
                                    <option value="fire.css">Fire</option>

                                </select>
                            </div>
                        </div>
                </div>
            </div>            
        </div>
    </div>
 </div>

setting.component.html

<html>
  <head>

    <base href="/">  
    <title>Workshop Scheduler </title>
    <meta charset="UTF-8">
    <!--Related Stylesheets-->

    <link rel="stylesheet" href="resources/styles/plugins.css">
    <link rel="stylesheet" href="resources/styles/main.css">

    <!-- **This theme is applied to the whole app**     -->

    <link rel="stylesheet" href="resources/styles/fire.css">

    <link rel="stylesheet" href="resources/styles/themes.css">


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- Configure SystemJS -->    
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/main.js')
            .catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>

        <app-start>Loading...</app-start>

  </body>
</html>

 <div id="page-wrapper">
    <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animation">

        <div id="main-container">
            <div id="page-content">    
                <ul class="breadcrumb breadcrumb-top">
                    <li>Manage</li>
                    <li><a href="">My Settings</a></li>
                </ul>

                <div class="block full">
                    <div class="block-title">
                        <h2><strong>Settings</strong></h2>
                    </div>
                    <div class="form-horizontal form-bordered">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Username</label>
                            <div class="col-xs-9">
                                <p class="form-control-static">{{userData.fName}} {{userData.lName}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label testColor" for="user-settings-email">Email</label>
                            <div class="col-xs-9">
                                <p class="form-control-static">{{userData.email}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label" for="inputTheme">theme</label>
                            <div class="col-xs-9">
                                <select class="form-control" name="inputTheme" id="inputTheme" (change)="changeTheme($event.target.value)">
                                    <option value="ocean.css">Ocean</option>
                                    <option value="main.css">Main</option>
                                    <option value="fire.css">Fire</option>

                                </select>
                            </div>
                        </div>
                </div>
            </div>            
        </div>
    </div>
 </div>



管理


设置
用户名
{{userData.fName}}{{userData.lName}
电子邮件
{{userData.email}
主题
海洋
主要
火