styleUrls 未在 angular2 ChildComponent (RC5) 中加载

Posted 2023-03-13

【中文标题】styleUrls 未在 angular2 ChildComponent (RC5) 中加载

【英文标题】：styleUrls not being loaded in angular2 ChildComponent (RC5)

【发布时间】：2016-12-19 13:48:36

【问题描述】：

在我的 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 但它不起作用...

【问题讨论】：

你不觉得应该是/app/tutorial/chapter/chapter.css（准确）吗？或./chapter/chapter.css

或试试 ./app/tutorial/chapter/chapter.css

你是如何构建你的项目的？是否涉及 webpack？

@Jim 不，没有 webpack。普通香草打字稿

@PankajParkar 如果您看到下面的答案，我尝试了该路径，它适用于教程组件，但不适用于子“章节”组件

【参考方案1】：

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

import ViewEncapsulation from '@angular/core';  

   @Component(
       encapsulation: ViewEncapsulation.None
     )

【讨论】：

嗯，恐怕没什么区别吧？

【参考方案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"。

【参考方案3】：

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

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

【讨论】：

如果我在教程组件中使用该路径，则样式有效。如果我在章节组件中使用它，它不会...