如何在 Angular2 中混合“绝对”和相对 url？答案

【问题标题】：How do I mix "absolute" and relative urls in Angular2?如何在 Angular2 中混合“绝对”和相对 url？
【发布时间】：2016-11-21 02:54:37
【问题描述】：

有（至少？）2 种方式来指定 Angular2 中组件装饰器的 templateUrl 和 styleUrls 属性的 url：

“绝对”，或者更准确地说，相对于项目根目录（默认），并且
相对于当前文档/组件。

后者是通过使用组件相对路径来完成的，即通过在装饰器中包含moduleId: module.id。

但是如何将两者结合起来呢？例如，我想为一个组件使用两个不同的样式文件：

一般用于我的整个项目
- my-general-project-styles.css 在下面的例子中
- 文件位置应该相对于项目根目录（例如直接在项目根目录），以便不同位置的许多文件可以在其中心位置访问它
一个特定于我当前组件的
- my-specific-component.styles.css 在下面的例子中
- 文件位置应相对于当前文件/组件，以便文件及其相关样式（和模板等）可以轻松移动

例如：

@Component({
    moduleId: module.id, // I'm not sure if I should still use this
    template: '<h1>My Component</h1>',
    styleUrls: ['my-general-project-styles.css', 'my-specific-component-styles.css']
})
export class MyComponent {}

顺便说一句，我使用的是 commonjs 模块。

【问题讨论】：

标签： css url angular

【解决方案1】：

结果比我预期的要简单...只需在您希望相对于项目根目录的 url 前面放一个“/”，例如

@Component({
    moduleId: module.id,
    template: '<h1>My Component</h1>',
    styleUrls: ['/my-general-project-styles.css', 'my-specific-component-styles.css']
})
export class MyComponent {}

【讨论】：

【解决方案2】：

该解决方案对我不起作用。我使用 Angular 2.0.3 - 自您的帖子以来有任何变化吗？

不有效吗：

@Component({
moduleId: module.id,
selector: "process-list",
templateUrl: "processList.component.html",
styleUrls: ["/Content/processList.css"]
})

作品：

@Component({
moduleId: module.id,
selector: "process-list",
templateUrl: "processList.component.html",
styleUrls: ["../../../Content/processList.css"]
})

【讨论】：