如何在Angular v2组件中添加样式URL？(How to add style urls in Angular v2 components?)

我在他们的网站上关注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'文件夹，因此它是有意义的）

任何帮助表示赞赏:)

ps这是我构建应用程序时遇到的错误

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)

I am following the Angular tutorial on their website and I created some components, templates and styles.

I am having trouble including my styles in the components using the 'styleURLs' property of the '@Component' decorator. This is what I have,

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

As one can see, I put my styles inside the 'assets/styles' folder.

This is my folder structure,

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

I want to know if this is even possible; to have a style document in a different folder and have it referenced in the component.

I am just trying to de-clutter my files in the app directory, and I read somewhere that the images and styles need to be in the 'assets' folder (which is kind of a 'Content' folder, hence it makes sense)

Any help is appreciated :)

p.s. This is the error I get when I build the app

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)

最满意答案

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

话虽如此，我认为将组件特定样式与组件文件保持在一起通常是“最佳实践”。

而不是通过视图/组件/服务/模型分解，而是按组件分解。我们一般都有类似的东西：

/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有很多关于此的信息。

I think you dereferenced 1 level too far. so it should be ../../assets...

That being said, I believe it's generally "best practice" to keep your component specific styles alongside your component files.

Instead of breaking things up by view/component/service/model, break it up by component. we generally have sometihing like :

/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 has a bunch of information on this.

更多推荐