4

我在打字稿中有这个组件定义:

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: '/views/sandbox.html',
    styleUrls: ['/styles/sandbox.css'],
    styles: [`.wow { background-color: red; }`],
    encapsulation: ViewEncapsulation.Emulated
})
export class SandBox { }

根据这篇文章:http ://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html 样式部分和外部样式表中的样式都应该内联到标题中通过角度。

不幸的是,第二个没有被注入,角度只注入了样式部分中的一个。

我试过从浏览器访问/styles/sandbox.css,没问题。Angular 也能够访问 /views/sandbox.html 所以我不知道为什么它没有发生。

我正在使用:“angular2”:“2.0.0-beta.2”(最新的 beta AFAIK)

4

3 回答 3

10

如果您在属性sandbox.css中使用相对路径,我做了一些测试和奇怪的样式:styleUrls

@Component({
  selector: 'my-app',
  templateUrl: '/views/sandbox.html',
  styleUrls: ['../styles/sandbox.css'],
  styles: [`.wow { background-color: red; }`],
  encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
  constructor() {
  }
}

编辑

查看源代码后,Angular2 阻止使用绝对路径styleUrls。看到这一行:

希望它可以帮助你,蒂埃里

于 2016-02-04T10:05:31.560 回答
1

解决此问题的最佳方法是为您的组件使用另一个 css 文件并将其添加到您的 StyleUrls 列表中。更清洁,并且会随着组件的增长而扩展。

于 2016-02-04T11:50:23.853 回答
0

你可以使用 systemjs 和 commonjs 模块依赖加载器,来加载模板、样式和其他文件。

在 commonjs moduleId 中:systemJs 中的 module.id __moduleName

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

@Component({

moduleId:module.id,
selector: "exf-header",
templateUrl: "header.html",
styleUrls:['header.css']

})

export class HeaderComponent {

}
于 2016-11-23T14:16:32.353 回答