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>

だから私がやろうとしたのは、ng-bootstrap.jsの<div class="longTabMenu">にdrag-scrollを追加することです

そして、予想どおり、おそらく<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で利用可能な属性を定義する
• 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);
        });
}
...
}

また、少し提案があります（それが良いアイデアかどうかはわかりませんが）： document.addEventListener() ＆ document.removeEventListener()の代わりにAngular2のrenderer.listen() ＆ renderer.listenGlobal()を使用してくださいdocument.removeEventListener()
この変更を行うことにより、ソースコードはおそらくバニラJSと混合されるのではなく、純粋なAngular2で記述されます。

最後に、あなたの努力に感謝し、うまくいけば私の発見/提案が役立つでしょう！

@tommykamkcmこれを報告していただきありがとうございます。 renderer.listenGlobal()を使用するようにライブラリを更新しました。 他に気づいたら教えてください。

こんにちは@bfwg 、ご迷惑をおかけして申し訳ありませんが、昨日行ったことは実際には他のコンポーネントに影響を与えていることがわかりました。 。

私が提案するのは、コンストラクターのdocument $ではなくel.nativeElementにmouseup mousemoveをバインドすることです。

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

これを行った後、初期化に必要な手順は2つだけです。

• APIで利用可能な属性を定義する
• ngOnChanges（）を呼び出す
• 〜renderer.listen（）とrenderer.listenGlobal（）を使用してすべてのマウスイベントをバインドします〜

コンストラクター（...）{}
ngOnInit（）：void {
..。
// 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）;
}）;〜
}

最後に、ソースコードをコンパイルして、 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で少し遊んだことがありますが、以前の実装のように、ハックを使用せずに動作させることはできません。

@bfwgの心配はありません。ハックがあり、それが機能する限り、誰もがリラックスする必要があります。

ハックを実行するメソッド、つまりプラグインをDOM要素に動的に適用するメソッドがあればよいでしょう。

とにかく、あなたのサポートにもう一度感謝します！ 心から感謝する！

ねえ@tommykamkcm 、私はあなたが望むことをするプラグインでattach()メソッドを使っています：

「プラグインをDOM要素に動的に適用する」

ほぼ完了です。準備ができたら、プルリクエストを確認しますか？
大幅な遅延でごめんなさい。 😞

こんにちは@bfwg心配ありません、私は本当にあなたの助けに感謝します！ コードを読むだけで、すべてが良さそうです！ 再度、感謝します！

こんにちは@ tommykamkcm / @ bfwgスクロール付きのngb-tabsのデモをドロップしてください

ありがとう