Question

我的要求是我需要从变量调用css url。其实我不想硬编码。根据登录用户，css的名称将被下载到本地存储中，并从那里我想在index.html上加载它，我该如何做到这一点？

我的Error in response to tabs.query: Error: Invalid value for argument 1. Property 'active': Unexpected property, Property 'audible': Unexpected property, Property 'autoDiscardable': Unexpected property, Property 'discarded': Unexpected property, Property 'height': Unexpected property, Property 'highlighted': Unexpected property, Property 'id': Unexpected property, Property 'incognito': Unexpected property, Property 'index': Unexpected property, Property 'mutedInfo': Unexpected property, Property 'pinned': Unexpected property, Property 'selected': Unexpected property, Property 'status': Unexpected property, Property 'width': Unexpected property, Property 'windowId': Unexpected property. at Object.callback (chrome-extension://kmappdoedakemifdcbjiojlffegjbkcf/popup.js:16:25) at chrome-extension://kmappdoedakemifdcbjiojlffegjbkcf/popup.js:12:13

index.html

Answer 1

为什么不创建一个动态生成内联<script>标记的Angular组件，该标记包含一个动态生成的@import语句，用于加载css。此组件将添加到根组件模板中。

因此动态css组件的模板可能如下所示：

<style>
   @import "{{dynamicCssFileLocation}}.css";
</style>

在mainn index.html文件中使用此动态css组件的选择器，它应该从变量dynamicCssFileLocation

加载此动态文件

Answer 2

打开你的主style.css（这个文件在app文件夹下）文件并在这行代码上写上： -

的style.css

@import "/assets/files/css/style.css";

Answer 3

这可能对某人有所帮助。而是添加一个文件，如果有最小的动态css，你可以包含它。控制器上的动态生成的CSS可以使用样式标记中的ng-bind-html属性绑定到HTML视图。

查看http://www.codeexpertz.com/blog/angularjs/adding-dynamic-generated-csscascading-style-sheet-angularjs-view-example 演示和示例代码

<强> HTML

    <style ng-bind-html="myStyle"></style>
    <span>Enter the background colour value:</span>
    <span><input type = "text" ng-keyup="updateChanges()" ng-model = "bgcolour"></span>
    <br/>
    <div class="codeexpertz">
    </div>

<强> SCRIPT

    app.controller("myCtrl", function($scope) {
    $scope.bgcolour = '11acfd';
    $scope.updateChanges = function(){
        $scope.myStyle= '.codeexpertz { background-color: #' + $scope.bgcolour + '; height: 100px; width: 100px; border: 1px #000 solid}';
    }
    $scope.updateChanges();

如何在index.html上动态调用我的css文件 - angular2

3 个答案: