如何在 Angular js 中包含我的组件的 .css 文件答案

【问题标题】：How to include .css file of my component in angular js如何在 Angular js 中包含我的组件的 .css 文件
【发布时间】：2021-10-31 15:02:10
【问题描述】：

我以这种方式包含了我的组件的 .css 文件 `

angular.
  module('home').
  component('home', {
    templateUrl: 'home/home.template.html',
    styleUrls: 'home/home.component.css'
    
    
  });

` 但似乎样式表没有得到应用。包含样式表的正确方法是什么？ This is the folder structure.

【问题讨论】：

只是想知道为什么你用 javascript 而不是 typescript 编写 angular 2。此外，您粘贴代码的方式使其看起来像 angular.js，而不是 angular 2+ 指南
我有一个项目要在 Angular 1.x 中构建，其中包括 .js 文件。

标签： css angularjs angular angular-components angular-module

【解决方案1】：

I faced the same problem and then I found the answer. just add this line inside the component declaration :

encapsulation: ViewEncapsulation.None

for example, 

@Component({
  templateUrl: './usertradedata.component.html',
  animations: [appModuleAnimation()],
  styleUrls:['./usertradedata.component.css'],
  encapsulation: ViewEncapsulation.None
})

【讨论】：

【解决方案2】：

styleUrls 接受一个数组

styleUrls: ['home/home.component.css']

【讨论】：

我试过了，但没有任何作用。 Css 没有被应用。

【解决方案3】：

你必须像这样在 url 上加上方括号：styleUrls: ['home/home.component.css']

angular.
  module('home').
  component('home', {
    templateUrl: 'home/home.template.html',
    styleUrls: ['home/home.component.css']
    
    
  });

【讨论】：