时间戳

首页 > 解决方案 > Angular6，无法预定义 styleUrls

angular - Angular6，无法预定义 styleUrls

问题描述

import { Component } from '@angular/core';
const urls = ['./app.component.css'];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: urls
})
export class AppComponent {
  title = 'multi-css-app';
}

这最终会出现如下错误 在此处输入图像描述

有谁知道为什么？

我尝试这样做的原因是在构建组件之前确定要使用哪个 css 文件。例如这个应用的 style.a.css 和不同应用的 style.b.css。

仅供参考：我正在使用 Angular6

标签： angularcomponents

解决方案

我通过一个例子给出答案，您可以根据您的要求进行更改，因为我不知道您的情况。

例子

import { Component, OnInit, isDevMode } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 
  cssUrl: string;
 
  constructor(public sanitizer: DomSanitizer) {
 
  }
 
  ngOnInit() {
    const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 
    const n = randomIntegerInRange(1, 100) % 2;
    this.cssUrl = n % 2 === 0 ? '/assets/styles1.css' : '/assets/styles2.css';
  }
 
}

上面显示的代码执行以下操作：

  • 它实现了 OnInit 生命周期钩子。这个钩子在组件被渲染之前被调用。
  • 如果数字是偶数，我们将 cssUrl 值设置为 styles1.css，否则我们将其设置为 styles2.css。
  • 接下来，我们需要在 assets 目录中创建两个 CSS 文件。将 CSS 保留在 assets 目录中的好处是它们不会被打包到应用程序包中。因此，要控制包装尺寸。

现在我们已经创建了样式文件。我们只需要更新 app.component.html 以使用 cssUrl 属性。

<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(cssUrl)'>
 
<h1>Working with dynamic CSS loading -:)</h1>

我们必须使用 Angular 的 DomSanitizer sanitizer.bypassSecurityTrustResourceUrl(cssUrl) 来告诉 Angular 该 URL 可以安全使用。如果你不这样做，那么 Angular 会给你一个错误。

Error: unsafe value used in a resource URL context

推荐阅读