Ngx-drag-scroll: 问题：如何将它与 ng-bootstrap 的标签集一起使用？

嗨@tommykamkcm ，我很乐意尽我所能寻求帮助，你能提供一些代码吗？

谢谢你的及时回复！ 首先，我对Angular1只有一些经验，而且我是Angular2的新手。 所以我不确定我正在尝试做的事情是否可行：

下面是生成 ng-bootstrap 的 Tabset 组件的 HTML 代码： https ://ng-bootstrap.github.io/#/components/tabs

<ngb-tabset>
    <ngb-tab *ngFor="let group of groups" [id]="group.id">
        <template ngbTabTitle>{{group.name}}</template>
        <template ngbTabContent>
            ...
        </template>
    </ngb-tab>
</ngb-tabset>

最终变成

<ngb-tabset _ngcontent-43="">
   <div class="longTabMenu">
    <ul role="tablist" ng-reflect-class-name="nav nav-tabs justify-content-start" class="nav nav-tabs justify-content-start">
        <li class="nav-item">
            <a href="" role="tab" ng-reflect-ng-style="[object Object]" ng-reflect-id="Themes" id="Themes" ng-reflect-class-name="nav-link nav-link-Themes" class="nav-link nav-link-Themes active" aria-controls="Themes-panel" aria-expanded="true" style="border-color: blanchedalmond;">
                Tab 1
            </a>
        </li>
        ...
        </ul>
    </div> 
    <div class="tab-content">
      ...
    </div>
  </ngb-tabset>

所以我试图做的是将drag-scroll添加到 ng-bootstrap.js 中的<div class="longTabMenu">

正如预期的那样，它可能不起作用，因为<div class="longTabMenu" drag-scroll ...>没有被渲染。

由于第一次尝试似乎不起作用，我现在正在考虑是否可以将 DragScroll 组件注入到主机组件的ngOnInit / ngAfterViewInit中，以便我可以在<div ... >上手动初始化 DragScroll
例如

@Component({
    selector: 'wd-shows',
    templateUrl: 'app/shows/shows.component.html',
    styleUrls: ['app/shows/shows.component.css'],
    providers: [ShowService, JobService],
})

export class ShowsComponent implements OnInit, AfterViewInit {
...
ngAfterViewInit(): void {
        console.log('AfterViewInit');
        console.log(this.elTablistHolder);
        this.elTablistHolder = this.element.nativeElement.querySelector('.longTabMenu');
        this.renderer.setElementAttribute(this.elTablistHolder, 'drag-scroll', null);
        this.renderer.setElementAttribute(this.elTablistHolder, 'drag-scroll-y-disabled', 'true');
        this.renderer.setElementAttribute(this.elTablistHolder, 'scrollbar-hidden', 'true');
        **// Not sure what's next, still googling**
    }
...
}

这就是我目前掌握的所有信息。 非常感谢您的宝贵时间！

你好@bfwg ，终于让它工作了！ 基本上，我需要手动

• 定义 API 中可用的 attrs
• 调用 ngOnChanges()
• 使用 renderer.listen() & renderer.listenGlobal() 绑定所有鼠标事件

export class BlahComponent implements OnInit {
...
dragScrollDom: any;
dragScrollRef: ElementRef;
dragScroll: DragScroll;

constructor(...) {}
ngOnInit(): void {
...
        // At the end of the ngOnInit()
        this.dragScrollDom = this.element.nativeElement.querySelector('.longTabMenu');
        this.dragScrollRef = new ElementRef(this.dragScrollDom );
        this.dragScroll = new DragScroll(this.dragScrollRef, this.renderer);
        this.dragScroll.disabled = false;
        this.dragScroll.scrollbarHidden = true;
        this.dragScroll.yDisabled = true;
        this.dragScroll.xDisabled = false;
        this.dragScroll.ngOnChanges();
        this.renderer.listen(this.dragScrollDo , 'mousedown', (event) => {
            this.dragScroll.onMouseDown(event);
        });
        this.renderer.listenGlobal('document', 'mousemove', (event) => {
            this.dragScroll.onMouseMove(event);
        });
        this.renderer.listenGlobal('document', 'mouseup', (event) => {
            this.dragScroll.onMouseUp(event);
        });
}
...
}

我还有一个小建议（虽然我不确定这是否是个好主意）：使用 Angular2 的renderer.listen() & renderer.listenGlobal()而不是document.addEventListener() & document.removeEventListener()
通过进行此更改，源代码可能会用纯 Angular2 编写，而不是与 vanilla JS 混合

最后，感谢您的努力，希望我的发现/建议有用！

@tommykamkcm感谢您报告此事，我已更新库以使用renderer.listenGlobal() 。 让我知道您是否注意到其他任何事情。

你好@bfwg ，很抱歉很烦人，但我刚刚发现我昨天所做的实际上影响了其他组件，例如 .

我建议做的是：在构造函数中将mouseup mousemove绑定到el.nativeElement而不是document

this.mouseMoveListener = renderer.listen(el.nativeElement, 'mousemove', this.onMouseMoveHandler);
this.mouseUpListener = renderer.listen(el.nativeElement, 'mouseup', this.onMouseUpHandler);

完成此操作后，初始化只需要 2 个步骤：

• 定义 API 中可用的 attrs
• 调用 ngOnChanges()
• ~使用 renderer.listen() & renderer.listenGlobal() 绑定所有鼠标事件~

构造函数（...）{}
ngOnInit(): 无效 {
...
// 在 ngOnInit() 结束时
this.dragScrollDom = this.element.nativeElement.querySelector('.longTabMenu');
this.dragScrollRef = new ElementRef(this.dragScrollDom );
this.dragScroll = new DragScroll(this.dragScrollRef, this.renderer);
this.dragScroll.disabled = false;
this.dragScroll.scrollbarHidden = true;
this.dragScroll.yDisabled = true;
this.dragScroll.xDisabled = false;
this.dragScroll.ngOnChanges();
this.renderer.listen(this.dragScrollDo , 'mousedown', (event) => {
this.dragScroll.onMouseDown(事件);
});
~this.renderer.listenGlobal('document', 'mousemove', (event) => {
this.dragScroll.onMouseMove(事件);
});
this.renderer.listenGlobal('document', 'mouseup', (event) => {
this.dragScroll.onMouseUp(事件);
});~
}

最后，如果您可以编译源代码并使其可用于npm install ，那就太好了。 非常感谢！

啊，我明白你的意思了。 我将在今天某个时间更新源并上传到 npm，再次感谢您的报告。

嘿@tommykamkcm ，我刚刚意识到mouseup和mousemove必须在文档上，否则如果您按下鼠标并拖动到组件外部，内容将停止移动。
有任何想法吗？ 如果你愿意，你可以提出一个拉取请求，我可以合并它。

你好@bfwg ，也许让我们退后一步考虑不同的用例。

我的用例是通过鼠标或手指使长水平菜单可拖动滚动。 一切都很顺利，直到我拖动了一个对鼠标移动敏感的 HTML5 滑块。 我可以单击并拖动，但在到达正确位置后不能松开手柄。

所以对我来说，我期望的是 a) 用户。 始终在拖动区域内拖动，即菜单 b) 页面上的其他组件不应受到插件的影响。

并且您的用例可能是只要用户按住并移动鼠标，他们应该能够轻松拖动并查看内容的某个部分（拖动区域 = document ）

我确信会有越来越多的用例，并且我认为使拖动区域可配置 [self| default:document ] 可能是要走的路。

嗨@tommykamkcm ，我认为我们绝对可以解决这个问题。 我将使用 ng-bootstrap 的标签集进行测试，看看是否可以重现。
再次感谢您对我的耐心😄。

嗨@tommykamkcm ，我已将以下代码放入演示应用程序 html 模板中。

    <ngb-tabset>
      <ngb-tab title="Simple">
        <ng-template ngbTabContent>
          <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
          master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
          dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
          iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
        <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
          <div class="demo-one" drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
            <img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
          </div>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>

拖动列表按预期工作。 你能提供更多关于你的html代码的细节吗？

你好@bfwg很抱歉长时间的沉默。

我要做的实际上是将插件应用于<ngb-tab> ，稍后将替换为<ul role="tablist" ... >

不用担心@tommykamkcm ，我明白了，您正在尝试在组件渲染后附加指令。 让我明天试试，我会尽快回复你。

@tommykamkcm抱歉延迟回复。 我玩过ng-tab一点，如果不使用一些 hack，我无法让它工作，就像在你之前的实现中一样。

不用担心@bfwg ，只要有黑客攻击并且有效，每个人都应该放松。

如果我们可以有一个方法来做hack，换句话说，动态地将插件应用到一个DOM元素上，那也是很好的！

无论如何，再次感谢您的支持！ 真的很感激！

嘿@tommykamkcm ，我正在使用插件中的attach()方法来执行您想要的操作：

“将插件动态应用到 DOM 元素”

快完成了，您想在准备好后查看拉取请求吗？
很抱歉造成巨大的延误。 😞

您好@bfwg不用担心，非常感谢您的帮助！ 只需阅读您的代码，一切看起来都很好！ 再次感谢！

嗨@tommykamkcm / @bfwg你能放下带有滚动的 ngb-tabs 的演示吗

谢谢