如何在 Angular v2 组件中添加样式 url？

Question

我正在按照他们网站上的 Angular 教程进行操作，并创建了一些组件、模板和样式。

我在使用“@Component”装饰器的 'styleURLs' 属性将我的样式包含在组件中时遇到问题。这就是我的，

@Component({
  selector: 'curries',
  templateUrl: '../Views/curries.component.html',
  styleUrls: ['../../../assets/styles/curries.component.css'],
  providers: [CurryService]
})
export class CurriesComponent { // blah blah

如你所见，我将我的样式放在 'assets/styles' 文件夹中。

这是我的文件夹结构，

/src
    /app
        /Views
        /Components
           /curries.component.ts
        /Services
        /Models
    /assets
        /images
        /styles
           -curries.component.css

我想知道这是否可能；在不同的文件夹中有一个样式文档并在组件中引用它。

我只是想整理我在 app 目录中的文件，我在某处读到图像和样式需要放在 'assets' 文件夹中（类似于 'Content' 文件夹，因此有意义）

感谢任何帮助:)

p.s。这是我在构建应用程序时遇到的错误

ERROR in ./src/app/Components/curries.component.ts
Module not found: Error: Can't resolve 
'../../../assets/styles/curries.component.css' in             
'~\AngularProjects\HelloWorld\src\app\Components'

resolve '../../../assets/styles/curries.component.css' in 
'~\AngularProjects\HelloWorld\src\app\Components'using 
 description file: ~\AngularProjects\HelloWorld\package.json (relative 
 path: ./src/app/Components)

Answer 1

是的，您可以访问 styleUrls 数组中的任何样式

https://angular.io/guide/component-styles#style-urls-in-metadata

请参阅此 Plunker 以了解在不同路径中引用其他 .css 文件的一个很好的示例

@Component({
  selector: 'my-app',
  template: `
    <h1>Title</h1>
    <p>Hello...</p>
    <span>... world!</span>`,
  styleUrls: [
    'app/app1.component.css',
    'testing/app2.component.css'
  ]
})

Answer 2

我认为您对第 1 层的引用过分了。所以应该是 ../../assets...

话虽如此，我认为通常 "best practice" 将您的组件特定样式与您的组件文件放在一起。

与其按 view/component/service/model 分解，不如按组件分解。我们通常有类似的东西：

/src
    /app
        /compoenents
            /curries
                curries.component.ts
                curries.component.css
                curries.component.html
        /shared
            { put and shared modules here }
    /assets
        /images 
        /styles
            { global styles go here }

https://angular.io/guide/styleguide 有很多这方面的信息。

Answer 3

参考（模板 url`s 的样式）相对于 "Index.html" 您的主要 html 页面。

如何在 Angular v2 组件中添加样式 url？

How to add style urls in Angular v2 components?

css

angular-components

angular