时间戳

首页 > 解决方案 > 如何以角度动态加载特定于组件的css样式

css - 如何以角度动态加载特定于组件的css样式

问题描述

我正在尝试加载一些特定于组件的 CSS 样式表，这样就不会与项目的其余部分发生冲突。

我的 AppService 中的函数

  static loadCSS(url) {
    const link = document.createElement('link');
    link.href = url;
    link.rel = 'stylesheet';
    link.type = 'text/css';

    const head = document.getElementsByTagName('head')[0];
    const style = head.getElementsByTagName('style')[0];

    head.insertBefore(link, style);
  }

我在所需的组件中有一组样式表

  pagesCSS = [
    'assets/plugins/bootstrap/css/bootstrap.min.css',
    'assets/plugins/font-awesome/css/all.min.css',
    'assets/plugins/toastr/toastr.min.css',
    'assets/css/lime.min.css',
    'assets/css/custom.css'
  ];

最后

  ngOnInit() {
    AppService.loadCSS(this.pagesCSS);
  }

我收到此错误

 The resource from “http://localhost:4200/assets/plugins/bootstrap/css/bootstrap…toastr.min.css,assets/css/lime.min.css,assets/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

标签： cssangular

解决方案

推荐阅读