在我的angular 2（RC5）项目中，我有许多组件都可以正常工作，但是，我添加了一个子模块，除了childComponent的Devise属性外，它工作正常。如果我在styleUrl（子模块的根组件）中使用相同的url路径，则应用样式。如果我向tutorial（子模块的子组件）添加完全相同的路径，那么样式是否已应用？
博客中没有404，Chrome浏览器的开发工具不会将chapter显示为来源，也不会显示在网络上。
在这里，您可以看到导致我出现问题的组件：
chapter.css @Component({
selector: 'chapter',
template: `<div [innerHTML]="content"></div>`,
styleUrls: ['app/tutorial/chapter/chapter.css']
})
export class chapterComponent implements OnInit, OnDestroy {
private sub: Subscription;
private content: string = '';
constructor( private route: ActivatedRoute) { }
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
var that = this;
var _url = './chapter/' + params['id'] + '.html';
$.ajax({
url: _url,
success: function (result) {
that.content = result;
}
});
});
}
}
未被提取......您可以在此处查看我的项目文件：
chapter.css为什么只有这个组件不起作用...我能看到的唯一区别是这个组件是一个子组件，所以也许这有所不同？
正如对答案的评论中所述，使用路径 |-- error.html',
|-- index.html',
|-- app',
|-- app.component.ts',
|-- app.module.ts',
|-- app.routes.ts',
|-- main.ts',
|-- home',
| |-- home.component.ts',
| |-- home.css',
| |-- home.html',
|-- tutorial',
|-- tutorial.component.ts',
|-- tutorial.css',
|-- tutorial.html',
|-- tutorial.module.ts',
|-- tutorial.routes.ts',
|-- chapter',
|-- chapter.component.ts',
|-- chapter.css',
|-- chapter.html',
在教程组件中起作用，但完全相同的路径在章节组件（子组件）中不起作用。我还添加了ViewEncapsulation，但它没有工作......
答案 0 :(得分：11)
尝试将“encapsulation：ViewEncapsulation.None”添加到您的父组件
import {ViewEncapsulation} from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None
})
答案 1 :(得分：1)
http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html本文有几种不同的方法可以解决各种模块加载器的相对路径问题。当我遇到类似的问题时，这帮助我解释了什么是错的（尽管我使用的是webpack，但这并不重要）。
关键的一课是在@Component装饰器中设置moduleId：module.id！如果没有moduleId设置，Angular 2将在相对于应用程序根目录的路径中查找我们的文件。
不要忘记tsconfig.json中的“module”：“commonjs”。
答案 2 :(得分：0)
将styleUrls: ['app/tutorial/chapter/chapter.css']更改为styleUrls: ['./app/tutorial/chapter/chapter.css']。
如果您想知道，.中的./app/tutorial/chapter/chapter.css指定当前目录。