Question

我在他们的网站上关注Angular教程，并创建了一些组件，模板和样式。

我在使用＆＃39; styleURLs＆＃39;在组件中包含我的样式时遇到问题。＆＃39; @Component＆＃39;的属性装饰。这就是我所拥有的，

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

正如人们所看到的，我将自己的风格置于“资产/风格”中。文件夹中。

这是我的文件夹结构，

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

我想知道这是否可行;将样式文档放在不同的文件夹中，并在组件中引用它。

我只是想在app目录中解除我的文件杂乱，我在某处读到图像和样式需要在＆＃39; assets＆＃39;文件夹（这是一个＆＃39; Content＆＃39;文件夹，因此有意义）

感谢任何帮助：）

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

我认为你过度引用了1级。所以它应该是../../assets...

话虽如此，我相信它一般都是最好的做法＆＃34;保持组件特定样式与组件文件一起。

不要通过视图/组件/服务/模型进行分解，而是按组件分解。我们一般都有像：

/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 2

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

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

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

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

Answer 3

引用（对于模板url的样式）是 relative 到＆＃34; Index.html＆＃34;你的主要HTML页面。

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

3 个答案: