Question

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

md-card { // some styling }

VS

.md-card { // some styling }

哪种被认为是最佳做法？我问的主要原因是因为我正在开展一个项目，其中一些组件在标签上有样式，而其他组件则使用经典方法。

我在元素方法中可以看到的一个好处是，HTML模板可以减少膨胀 - 不需要内部标记。另一个是使用像HostBinding这样的装饰器会稍微容易一些。

Answer 1

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

canvas.onclick = function(evt) {
    var activePoints = donut.getElementsAtEvent(evt);
    if(activePoints[0]) {
        var chartData = activePoints[0]['_chart'].config.data;
        var idx = activePoints[0]['_index'];
        var label = chartData.labels[idx].toUpperCase();

        ctx.font = "bold 18px Verdana, Arial, sans-serif";
        var textWidth = ctx.measureText(label).width;

        ctx.fillStyle = "#000";
        ctx.fillText(label, (250/2) - (textWidth/2), (250/2));
    }
};

例如：

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

Answer 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组件模式

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

2 个答案: