Question

有没有办法根据模块选择性地加载JS？

我希望将Bootstrap.css包含在前端的模板中，并将Angular Material包含在我的应用程序后端的temaplates中。

目前，如果我在一个组件中导入backend.css，那么它全局加载，我不想要。这也意味着ngMaterial和$(document).ready(function(){ $(".info").click(function(){ if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).siblings('.conteudo').slideUp(450); } else { $(this).addClass('active'); $(this).siblings('.conteudo').slideDown(500); $(this).parents().siblings().children('.conteudo').slideUp(450); $(this).parents().siblings().children('.info').removeClass('active'); } }); });也将加载到前端组件......

Answer 1

所以我提出的有条件加载CSS的方式不是很优雅，但有效。

我正在使用Angular UI路由器，当涉及到解析路由时，我使用link在CSS表中附加/删除angular.element()标记。在我的例子中，它是后端和前端的抽象路由，因此它在浏览子路径时只解析（并附加/删除）链接标记一次。

// Frontend - add Bootstrap

$stateProvider
.state('front', {
    url: "",
    abstract: true,
    templateUrl,
    resolve: {
        importBootstrapCss() {
            let head = angular.element(document.querySelector('head'));
            head.append("<link rel='stylesheet' type='text/css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' id='bootstrap-css'>");
        }
    }
});

// Backend - remove Bootstrap

$stateProvider
.state('backend', {
    url: "/backend",
    abstract: true,
    templateUrl,
    resolve: {
        deleteBootstrapCss() {
            let link = angular.element(document.getElementById('bootstrap-css'));
            link.remove();
        }
    }
});

Angular-Meteor应用程序中的Bootstrap（前端）+ ngMaterial（后端）一起？

1 个答案: