Css angular 2中的动态样式URL？

是否可以将URL动态注入到组件的样式表中

比如：

styleUrls: [
  'stylesheet1.css',
  this.additionalUrls
]

或者（一厢情愿，请注意这只是伪代码）：

因为如果您能够在没有访问权限的情况下覆盖

stylesheet1

中的某些样式，您应该怎么做？我唯一的想法是以某种方式使用动态

样式URL

，但我认为从我所能找到的来看，这是不可能的

---

有什么想法吗？

我不认为您可以使用动态样式表URL，因为您无法访问

@组件

装饰器中的类属性或方法

---

但是你可以通过在模板中包含动态样式类来实现你的目标。

我以前也需要将URL动态注入样式表，最终用空模板为每个变量css（在我的例子中是3种不同的样式）初始化一个组件，并在我的应用程序组件中使用ngIf条件

---

由于使用了属性“封装：ViewEncapsulation.None”，所选组件的样式随后被添加到页面的标题中，从而能够为整个页面获得正确的呈现程序。

我使用了html模板中带有ngIf条件的样式表链接，它对我有效

<link rel='stylesheet' href="/stylesheets/classicTheme.css" *ngIf="theme === 'classic' " />
<link rel='stylesheet' href="/stylesheets/styleTheme.css" *ngIf="theme === 'style' " />

---

它可能以某种可能的方式对我起作用。您可以操作Angular 2组件装饰器，创建自己的装饰器，并将属性返回Angular的装饰器

  import { Component } from '@angular/core';

    export interface IComponent {
      selector: string;
      template?: string;
      templateUrl?: string;
      styles?: string[];
      styleUrls?: string[];
      directives?: any;
      providers?: any;
      encapsulation?: number;
    }

    export function CustomComponent( properties: IComponent): Function {
      let aditionalStyles: string;

      try {
          aditionalStyles =  require(`path to aditional styles/${ properties.selector }/style/${        properties.selector }.${ GAME }.scss`);
          properties.styles.push(aditionalStyles);
        } catch (err) {
          console.warn(err)
        }
      }

      return Component( properties );
    }

在组件中，将默认的angular 2@组件替换为新组件

import { CustomComponent } from 'path to CustomComponent';

@CustomComponent({
  selector: 'home',
  templateUrl: './template/home.template.html',
  styleUrls: [ './style/home.style.scss']
})
export class ......

---

我找到了一个解决方案：
1.我已在组件装饰器中将样式URL更改为样式。
2.我将获取我的变量。
3.我将在装饰器中使用require命令。

import { Component } from '@angular/core';
import { environment } from '../environments/environment';
let lang = environment['lang'];

@Component({
   selector: 'app',
   templateUrl: './app.component.html',
   styles: [require('./app.component.css'), require('./app.component.' + lang + '.css')]
  })

  export class AppComponent {

   constructor() { }

  }

---

---

在这个基本示例中，我导入了环境变量并动态更改了css字符串。

问题是我无法访问模板，只能访问组件本身。如果您无法访问模板，仍然希望使用不同的样式，为什么不考虑用相同的模板制作不同的组件（使用不同的样式表）并动态加载组件。这是一个选项，但它仍然不能提供完全的个人定制。动态样式类意味着css开销，而不是利用sass变量。对于每一个新皮肤，你将重复整个样式表。你测试过这个吗？是的，这对我来说很好。我正在使用webpack和Angular 2.0.0So@Chrillewoodz你也试过了吗？考虑使用此实现，但可能只是为每个样式创建一个新组件，引用相同的templateUrl，并从第三个模块导入所有脚本…是的，但您仍然需要创建一个需要使用的组件预样式，例如，不是一个组件从服务器接收样式名称，不是真正的动态你放了一个额外的括号和游戏变量，没有声明！只是好奇这到底是怎么回事？对于Angular 2，“app”在根元素中运行（通常位于

下）。那么，您的代码如何绑定到

主题

变量？不会覆盖组件的样式，也不会说它会或不会工作，但尽管每个人都认为由于应用程序运行的位置，他的代码不会工作，但应用程序可以更改页面标题，对吗？必须有一些访问

部分的权限。这种方法的问题是，Angle添加到头部的样式在组件销毁时不会自动删除。它们永远不会删除。Angular永远不会删除样式。我的第一个答案是stackoverflow。我不明白为什么答案不好。你能解释一下吗@让·弗朗索瓦·科尔贝蒂道歉！那个评论和标志是为了另一个答案，显然我不知怎么把它们放在这里了。请不要理会！你的回答很好！我不知道我在找什么。再次道歉。@noahlubko你试过制作吗？我不认为AOT编译器可以使用它。这显然不适用于

require

one-step-removed。我制作了一个带有基本组件类的模块，它还包括

export const base\u component\u STYLE=require（“./base.component.css”）

。如果我尝试使用

样式：[BASE\u COMPONENT\u STYLE]

创建一个子类，Ivy会抱怨“无法静态计算此表达式”--它无法在编译期间解析CSS。

import { Component } from '@angular/core';
import { environment } from '../environments/environment';
let lang = environment['lang'];

@Component({
   selector: 'app',
   templateUrl: './app.component.html',
   styles: [require('./app.component.css'), require('./app.component.' + lang + '.css')]
  })

  export class AppComponent {

   constructor() { }

  }