是否可以在 Web 组件中使用 vis-timeline？

问题描述

是否可以在 Web 组件中使用 vis-timeline？我正在尝试设置一个带有时间线的有角度的 Web 组件，并且该 Web 组件除了时间线之外被正确渲染，但时间线根本没有被渲染。这甚至有可能实现吗？如果我将 App.component.ts 的封装从 ViewEncapsulation.ShadowDom 更改为它工作正常，因为它不再位于 shadowroot 中。

组件：

export class TimelineComponent implements OnInit {

  @ViewChild('visualization',{ static: true }) timelineContainer: ElementRef;

  async ngOnInit() {
    this.options = this.getoptions();
    this.groups = this.getTimelineGroups();
    this.items = this.getItems();

    this.timeline = new Timeline(
      this.timelineContainer.nativeElement,this.items,this.groups,this.options
    );
  }
}

html：

<div class='timeline-container' #visualization>
</div>

解决方法

在深入研究问题一段时间后，简短的回答是肯定的，它可以在 Web 组件中使用。唯一的问题是库将样式附加到文档中，然后所有样式都丢失并且高度也不正确。因此，临时解决方案是在 Web 组件中 @import 缩小的 css。 vis-timeline 仍然将样式附加到文档中，它在 @import 之后被复制，如果某些类与 vis-timeline html 类具有相同的名称，则可能会出现问题。所以，这是一个临时解决方案。