noUiSlider не отображается в приложении angular - PullRequest
Новая
       52

noUiSlider не отображается в приложении angular

1 голос
/ 27 января 2020

Редактировать - Мое решение по взлому: Проблема связана с тем, как / когда / где angular получает NoUiSlider CSS. То, что сделало эту работу, это добавление css import @import "~nouislider/distribute/nouislider.min.css"; к моему стилю sr c>. css.

Я не считаю это реальным решением. Я хотел бы, чтобы все css для слайдера содержались внутри файла CSS компонента. Поэтому я думаю, что мой обновленный вопрос таков: как заставить NoUiSlider использовать CSS из компонента, который его содержит?

Исходный вопрос:

Мой слайдер будет не отображается в моем приложении Angular. Чего мне не хватает?

Я просто пытаюсь получить самый базовый c слайдер для рендеринга в своем приложении, и я не получаю ошибок, насколько я могу судить.

-

package.json - я добавлю больше, если нужно (я также пытался поместить "nouislider": "^14.1.1", в "dependencies") 

{
  ...
  "devDependencies": {
    ...
    "@types/nouislider": "^9.0.6",
    "nouislider": "^14.1.1",
    ...
  }
}

-

timeline-scroller.component.html («Test text» - это единственное, что я вижу при отображении моей страницы) 

<div #contentComponent>Test text</div>

-

timeline-scroller.component.ts (, {static: true} - новое требование в angular 8) 

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import * as noui from 'nouislider';

@Component({
  selector: 'app-timeline-scroller',
  templateUrl: './timeline-scroller.component.html',
  styleUrls: ['./timeline-scroller.component.css']
})
export class TimelineScrollerComponent implements AfterViewInit {
  @ViewChild('contentComponent', {static: true}) contentElement: ElementRef;
  public slider: noui.noUiSlider;

  constructor() { }

  ngAfterViewInit(): void {
    this.slider = noui.create(
      this.contentElement.nativeElement, {
        start: 1,
        range: { min: 0,  max: 20 }
    });
  }
}

1 Ответ

0 голосов
/ 05 марта 2020

Чтобы использовать библиотеки css в моем компоненте, мне нужно было установить для параметра encapsulation значение `encapsulation: ViewEncapsulation.None '

Затем мой декоратор компонентов стал: 

@Component({
  selector: 'app-timeline-scroller',
  templateUrl: './timeline-scroller.component.html',
  styleUrls: ['./timeline-scroller.component.css'],
  encapsulation: ViewEncapsulation.None
})

Тогда в моем slider.component.css я смог добавить импорт:

@import "~nouislider/distribute/nouislider.min.css";

...