组件选择器标签上的Angular 2样式？

Posted 2023-03-06

【中文标题】组件选择器标签上的Angular 2样式？

【英文标题】：Angular 2 styling on component selector tags?

【发布时间】：2017-06-25 11:48:55

【问题描述】：

我一直在研究一些 Angular 2 框架，主要是 Angular Material 2 和 Ionic 2。在它们的组件样式中，有一些样式是直接将 CSS 放在标签上的。例如，对于 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 似乎严格为每个带有主机元数据的组件添加了一个等效类。这就是为什么 mat-card 和 .mat-card 选择器都能工作的原因。

类选择器的一个好处是您的 css 规则不直接绑定到 html 实现。例如MatSidenav 具有mat-drawer mat-sidenav 类see 所以.mat-drawer 规则将涵盖<mat-sidenav> 和<mat-drawer> 实现。同样在从md- 前缀更新到mat- 前缀的过程中，我相信所有组件都会继续使用md- 前缀类以及一段时间的向后兼容性。

但是，为 Angular Material 2 使用类选择器需要暗示开发人员对类选择器将起作用有深入的了解。尽管他们似乎并没有隐藏或阻止您可以使用类选择器see这一事实。

这可能是一种取决于偏好的东西，但只要你保持一致，它就应该是可维护的。 你可以按照他们的模式来制作你的 oun 组件