noUiSlider 未出现在 angular 应用程序中

Question

编辑 - 我的 hack 解决方案： 问题与 how/when/where 有关 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", 放在 "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，我需要将组件封装设置为“封装：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";

noUiSlider 未出现在 angular 应用程序中

noUiSlider not showing up in angular application

nouislider

angular