Angular 6 - 如何在组件级别应用外部 CSS 样式表（传单）

CSS

Angular 6 中如何在组件级别应用外部 CSS 样式表？

在 Angular 6 中，为组件应用外部 CSS 样式表是一种常见需求，这样可以让每个组件拥有独立的样式。这种方法使得代码更加模块化和易于维护。以下是在 Angular 6 中实现在组件级别应用外部 CSS 样式表的步骤以及相应的案例代码。

步骤：

1. 创建外部 CSS 文件：

首先，在 Angular 6 项目中为特定组件创建一个外部 CSS 文件。例如，假设有一个名为 example-component 的组件，你可以创建一个名为 example-component.CSS 的外部样式文件。

2. 编写样式：

打开新创建的 example-component.CSS 文件，并编写该组件的样式。例如，假设你想为该组件的标题设置特定样式，你可以在这个文件中添加对应的 CSS 代码，比如：

CSS
   .component-title {
       font-size: 24px;
       color: #333;
       /* 其他样式属性 */
   }
   /* 可以继续添加其他针对该组件的样式 */
   

3. 在组件中引入外部样式：

打开 example-component.ts 文件（Angular 组件的 typescript 文件），并在 @Component 装饰器的 styleUrls 数组中添加外部 CSS 文件的路径，如下所示：

typescript
   import { Component } from '@angular/core';
   @Component({
       selector: 'app-example',
       templateUrl: './example-component.html',
       styleUrls: ['./example-component.CSS'] // 引入外部样式文件
   })
   export class ExampleComponent {
       // 组件相关逻辑和代码
   }
   

通过将 example-component.CSS 文件的路径添加到 styleUrls 数组中，Angular 将会应用该外部样式表到 example-component 组件中。

这样，你的 Angular 6 组件 example-component 将会引用并应用 example-component.CSS 中定义的样式。

以上步骤展示了在 Angular 6 中如何为特定组件应用外部 CSS 样式表的方法。这种做法有助于保持代码结构清晰、易于维护，并允许开发者更加灵活地管理组件的样式。