noUiSlider 没有出现在角度应用程序中

Question

编辑 - 我的 hack 解决方案：问题与 angular 如何/何时/在哪里获得 NoUiSlider CSS 有关。 使这项工作成功的是添加 css import @import "~nouislider/distribute/nouislider.min.css"; 到我的 src > styles.css 文件。

我不认为这是一个实际的解决方案。 我希望滑块的所有 css 都包含在组件的 CSS 文件中。 所以我想我更新的问题是：如何让 NoUiSlider 使用包含它的组件中的 CSS？

原问题：

我的滑块不会显示在我的 Angular 应用程序中。 我错过了什么？

我只是试图让最基本的滑块在我的应用程序中呈现，据我所知，我没有收到任何错误。

——

package.json -- 如果需要，我会添加更多（我也试过将"nouislider": "^14.1.1", in "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 }
    });
  }
}

Answer 1

为了在我的组件中使用库 css，我需要将组件封装设置为 `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";