javascript - Angular 2 在组件选择器标签上的样式?

我一直在研究一些 Angular 2 框架，主要是 Angular Material 2 和 Ionic 2。在它们的组件样式中，有一些样式是直接写在标签上的。例如，对于 Card 组件，你会看到这样的样式：

md-card { // some styling }

对

.md-card { // some styling }

哪一种会被认为是最佳实践？我问这个问题的主要原因是我正在做一个项目，其中一些组件在标签上有样式，而其他组件使用的是传统方法。

我在元素方法中看到的一个好处是 HTML 模板会更简洁 —— 不需要内部的标签。另一个好处是使用某些装饰器，比如 HostBinding，会稍微容易一些。

答案＃1

我们可以这样做，希望这是你想要的

styles: [`
    :host {
        display: inline-block;
        border: 1px solid black;
    }
`]

例如：

@Component({
    moduleId: module.id,
    selector: 'selector',
    templateUrl: 'template.html',
    styleUrls: ['template.component.css'],
    styles: [`
        :host {
            display: inline-block;
            border: 1px solid black;
        }
    `]
})

答案＃2

尽管我找不到明确的文档记载，但似乎 Angular Material 2 会严格地向每个带有 host 元数据的组件添加一个等效的类。这就是为什么 mat-card 和 .mat-card 选择器都能工作的原因。

类选择器的一个好处是您的 CSS 规则不会直接绑定到 HTML 实现中。例如，MatSidenav 具有 mat-drawer 和 mat-sidenav 两个类，因此 .mat-drawer 规则将覆盖 <mat-sidenav> 和 <mat-drawer> 实现。此外，在从 md- 前缀更新到 mat- 前缀的过程中，我相信所有组件在一段时间内仍然继续使用 md- 前缀类以保持向后兼容性。

然而，对于 Angular Material 2 使用类选择器需要暗示开发者必须非常了解类选择器的工作原理。虽然他们似乎并没有隐藏或阻止你使用类选择器的事实，参见。

这可能是那种取决于个人偏好的事情，但只要你保持一致，它应该是可以维护的。你可以按照他们的模式来做你自己的组件