Question

我正在尝试构建一个使用chartist库显示图表的组件。我想知道是否可以仅为使用它的组件导入3D派对库样式。

这是组件代码：

import { Component, Input, AfterViewInit } from '@angular/core';
import * as Chartist from 'chartist';

@Component({
  selector: 'chartist',
  template: `
  <h1>Here is chratist chart:</h1>
  <div class="ct-chart" id="chart" ></div>
  `,
  styleUrls: [ './chartist.component.scss']
})
export class ChartistComponent  implements AfterViewInit {
  @Input() name: string;

  data: any = {
    labels: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'Mai',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec'
    ],
    series: [[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]]
  };

  ngAfterViewInit() {
    const optionsEmailsSubscriptionChart = {
      axisX: {
        showGrid: true
      },
      low: 0,
      high: 1000,
      chartPadding: { top: 0, right: 5, bottom: 0, left: 0 }
    };
    setTimeout(() => {
      const emailsSubscriptionChart = new Chartist.Bar(
        '#chart',
        this.data,
        optionsEmailsSubscriptionChart
      );
    }, 1000);
  }
}

到目前为止，我尝试使用＆＃39; import＆＃39;导入libray样式（未成功）。 chartist.component样式中的语句

// importing 3D library styles:
 @import '~chartist/dist/scss/chartist.scss';

出于某种原因，我设法在组件上应用样式的唯一方法是将它们导入全局＆＃39; styles.scss＆＃39;文件，应用程序的根级别（我试图避免）。

这里是stackblitz演示

任何帮助将不胜感激

Answer 1

你可以通过css隔离/前缀来做到这一点。我已经分叉你的Stackblitz来表明：https://stackblitz.com/edit/chartist-component-question-e5c82q 请查看styles.scss以获得解释。

您可以通过两种方式实现这一目标：

在styles.scss中导入样式并在其中添加前缀（请参阅stackblitz）。
如果您不想全局导入但只想在组件中导入，那么您必须对图表样式进行硬编码前缀。你可以通过使用less来将scss编译为css并让它在每个类名前面添加前缀。如果要在代码中设置scss变量并执行前缀，这也是必需的。

前缀的工作方式如下：所有类都获得另一个额外的类名。此类名称用于代码周围的容器（例如div）。

原则上你有一个类似_

.testclass {
    //some settings here
}

你可以这样使用它：

<div>
    </div class="testclass">
     ....
    </div>
</div>

使用前缀，您可以：

.prefix .testclass {
    //some settings here
}

并使用它：

angular - 仅为使用它们的单个组件导入3D派对库样式

1 个答案: