是否可以将样式表的 url 动态注入到组件中？
类似：
styleUrls: [
'stylesheet1.css',
this.additionalUrls
]
或者（一厢情愿，注意这只是假代码）：
export class MyComponent implements dynamicUrls {
ngDynamicUrls() {
this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']);
}
}
因为如果您能够覆盖 stylesheet1 中的某些样式而无需访问它，您应该怎么做？我唯一的想法是以某种方式拥有动态styleUrls，但我认为这甚至是不可能的。
有什么想法吗？
【问题讨论】：
我找到了解决办法：
1.我在组件装饰器中将styleurls改为样式。
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 字符串。
【讨论】：
require 一步。我制作了一个带有基本组件类的模块，它还包括export const BASE_COMPONENT_STYLE = require("./base.component.css")。如果我尝试使用 styles: [BASE_COMPONENT_STYLE] 创建一个子类，Ivy 会抱怨“无法静态评估此表达式”——它无法解析 CSS 在编译期间。
它可能以某种黑客方式对我有用。您可以操作 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 @Component 替换为新的。
import { CustomComponent } from 'path to CustomComponent';
@CustomComponent({
selector: 'home',
templateUrl: './template/home.template.html',
styleUrls: [ './style/home.style.scss']
})
export class ......
【讨论】：
我在带有 ngIf 条件的 html 模板中使用了样式表链接，它对我有用。
<link rel='stylesheet' href="/stylesheets/classicTheme.css" *ngIf="theme === 'classic' " />
<link rel='stylesheet' href="/stylesheets/styleTheme.css" *ngIf="theme === 'style' " />
【讨论】：
<body> 下）。那么，您的代码如何绑定到theme 变量？
<head>部分。
我曾经同样需要动态地将 url 注入样式表，并最终结束使用空模板为每个变量 css（在我的情况下为 3 种不同的样式）初始化一个组件，并在我的应用程序组件中使用 ngIf 条件。
由于使用了属性“encapsulation: ViewEncapsulation.None”，所选组件的样式随后被添加到页面的标题中，并能够为整个页面获取正确的渲染器。
【讨论】：
我认为您不能拥有动态样式表 URL，因为您无法访问 @Component 装饰器中的类属性或方法。
但是您可以通过在模板中添加动态样式类来实现您的目标。
【讨论】：