Question

在Angular2中有（至少？）两种方式为组件装饰器的templateUrl和styleUrls属性指定网址：

＆＃34;绝对＆＃34;或者更确切地说，相对于项目根（默认）和
相对于当前文档/组件。

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

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

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

e.g：

@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模块。

Answer 1

原来比我想象的要简单......只需要输入一个＆＃39; /＆＃39;在您想要相对于项目根目录的URL前面，例如

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

Answer 2

解决方案对我不起作用。我使用角度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"]
})

我如何混合绝对＆＃34;和Angular2中的相对网址？

2 个答案: