如何在 Angular 组件之间共享样式

场景

使用 CSS 类

使用共享组件样式文件

使用 SCSS@import

就到这里啦！

今天我将向大家展示在 Angular 中组件间共享样式的不同方法，我想其中一些技巧也适用于其他框架。

场景

我目前正在开发（另一个）登录页面。这次，我想在用户注册前显示一条消息，并让他们选择登录还是注册。因此，我创建了三个组件。我希望这三个组件共享相同的样式。

使用 CSS 类

Angular 通常有一个样式文件，允许你在应用程序中全局应用类。你可以在其中创建一个类并将其应用到你的组件中，这可以通过两种方式实现：使用host属性和使用HostBinding装饰器。

• 声明 CSS 类

  // In your style file, usually styles.scss
  .auth {
    // The styles you want to share
  }

• 使用主机 CSS 类

  @Component({
    // Stuff you know...
    host: {
      class: "auth"
    }
  })
  class WelcomeComponent {}

• 使用 CSS 类和 HostBinding

  @Component({
    // Stuff you know...
  })
  class WelcomeComponent {
    @HostBinding("class")
    public readonly classList = "auth";
  }

两个版本都能达到同样的效果，但我更喜欢第一个版本用于静态值，第二个版本用于动态值。

使用共享组件样式文件

当您使用组件的样式文件时，您可以执行一些有趣的操作，例如 ` :hoststyle . ...::ng-deepstyleUrls

@Component({
  // Stuff you know...
  styleUrls: ["./welcome.component.scss", "../shared.scss"]
})
class WelcomeComponent {}

请注意，URL 应相对于组件文件夹。

使用 SCSS@import

这是一个经典的例子，但我们可能会忘记 Angular 对 SCSS 文件并没有什么特殊处理，我们甚至可以使用 Webpack 的特性从src文件夹中导入文件。以下是具体操作方法。

• 声明混合

  // src/styles/_auth.scss
  @mixin auth {
    :host {
      // The styles you want to share
    }
  }

• 使用 mixin

  // src/../welcome.component.scss
  @import "src/styles/auth";

  @include auth;

就到这里啦！

现在你的应用里有三种共享样式的方法。你觉得你会用到其中哪一种呢？你还有其他方法可以在组件之间共享样式吗？请在评论区告诉我。当然，你也可以创建一个新的组件来专门应用样式，但我认为有时候 CSS 才是你真正需要的。

PS：顺便一提，我最终还是用了最新版本。