angular - импортировать стили библиотеки 3D-вечеринок только для одного компонента, который их использует - PullRequest
Новая
       7

angular - импортировать стили библиотеки 3D-вечеринок только для одного компонента, который их использует

0 голосов
/ 16 мая 2018

Я пытаюсь построить компонент, который отображает диаграмму, используя библиотеку диаграмм. Интересно, можно ли импортировать стили библиотеки 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);
  }
}

До сих пор я пытался (безуспешно) импортировать стили библиотеки, используя оператор import внутри стилей chartist.component 

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

По какой-то причине единственный способ, которым мне удалось применить стили к компоненту, - это импортировать их в глобальный файл 'styles.scss' корневого уровня приложения (которого я пытаюсь избежать).

здесь stackblitz демонстрация

Любая помощь будет оценена

1 Ответ

0 голосов
/ 16 мая 2018

Вы можете сделать это путем выделения / префикса css. Я раздвоил твой Stackblitz, чтобы показать, что: https://stackblitz.com/edit/chartist-component-question-e5c82q Посмотрите на styles.scss для объяснения.

Вы можете сделать это двумя способами:

  1. Импорт стилей из файла styles.scss и префикса put (см. Stackblitz).
  2. Если вы не хотите импортировать глобально, а только в свой компонент, тогда вам нужно жестко закодировать префикс стилей диаграммы. Это можно сделать, используя less для компиляции scss в css и позволяя ему добавлять префикс перед каждым именем класса. Это также необходимо, если вы хотите установить переменные scss в вашем коде и выполнить префикс.

Префикс работает так: все классы получают другое дополнительное имя класса. Это имя класса используется в контейнере (например, div) вокруг вашего кода.

Изначально у вас есть класс, как_ 

.testclass {
    //some settings here
}

и вы используете это так: 

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

С префиксом у вас есть это: 

.prefix .testclass {
    //some settings here
}

и используйте его так:

....

...