styleUrls 未在 angular2 ChildComponent (RC5) 中加载

Question

在我的 angular 2 (RC5) 项目中，我有许多组件都可以正常工作，但是，我添加了一个子模块，除了子组件的 styleUrl 属性之外，它工作正常。如果我在tutorial（子模块的根组件）中使用相同的 url 路径，则应用样式。如果我将完全相同的路径添加到chapter（子模块的子组件），那么不会应用样式？

博客中没有出现 404，并且 chrome 的开发工具没有将 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',

为什么只有这个组件不起作用......我能看到的唯一区别是这个组件是一个子组件，所以也许这有所作为？

更新：

正如答案中的 cmets 所述，使用路径 ./app/tutorial/chapter/chapter.css 在教程组件中有效，但完全相同的路径在章节组件（这是一个子组件）中不起作用。我还添加了 ViewEncapsulation 但它不起作用...

Answer 1

尝试将“封装：ViewEncapsulation.None”添加到您的父组件

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

   @Component({
       encapsulation: ViewEncapsulation.None
     })

Answer 2

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"。

Answer 3

将styleUrls: ['app/tutorial/chapter/chapter.css'] 更改为styleUrls: ['./app/tutorial/chapter/chapter.css']。

如果您想知道，./app/tutorial/chapter/chapter.css 中的. 指定当前目录。