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(): 무효 {
...
// ngOnInit() 종료 시
this.dragScrollDom = this.element.nativeElement.querySelector('.longTabMenu');
this.dragScrollRef = 새로운 ElementRef(this.dragScrollDom);
this.dragScroll = 새로운 DragScroll(this.dragScrollRef, this.renderer);
this.dragScroll.disabled = 거짓;
this.dragScroll.scrollbarHidden = true;
this.dragScroll.yDisabled = true;
this.dragScroll.xDisabled = 거짓;
this.dragScroll.ngOnChanges();
this.renderer.listen(this.dragScrollDo, '마우스다운', (이벤트) => {
this.dragScroll.onMouseDown(이벤트);
});
~this.renderer.listenGlobal('문서', '마우스 이동', (이벤트) => {
this.dragScroll.onMouseMove(이벤트);
});
this.renderer.listenGlobal('문서', '마우스업', (이벤트) => {
this.dragScroll.onMouseUp(이벤트);
});~
}

마지막으로 소스 코드를 컴파일하여 npm install 에 사용할 수 있게 하면 정말 좋을 것입니다. 매우 감사합니다!

아, 무슨 말씀인지 알겠습니다. 오늘 언젠가 소스를 업데이트하고 npm에 업로드하겠습니다. 다시 한 번 보고해 주셔서 감사합니다.

@tommykamkcm , 방금 mouseup 와 mousemove 가 문서에 있어야 한다는 것을 깨달았습니다. 그렇지 않으면 마우스를 누르고 구성 요소 외부로 끌면 콘텐츠가 이동을 멈춥니다.
어떤 아이디어? 원하신다면 풀 리퀘스트를 올려주시면 병합하겠습니다.

안녕하세요 @bfwg , 한발 물러서서 다른 사용 사례에 대해 생각해 봅시다.

내 사용 사례는 긴 가로 메뉴를 마우스나 손가락으로 드래그-스크롤 가능하게 만드는 것입니다. 마우스 이동에 민감한 HTML5 슬라이더를 끌 때까지 모든 것이 잘 진행되었습니다. 클릭하고 끌 수는 있지만 올바른 위치에 도달한 후에는 핸들을 놓을 수 없습니다.

그래서 나에게 내가 기대하는 것은) 사용자입니다. 항상 드래그 영역 내에서 드래그합니다. 즉, 메뉴 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 코드에 대한 자세한 정보를 제공해 주시겠습니까?

안녕하세요 @bfw 긴 침묵에 대해 죄송합니다.

내가 하려고 하는 것은 실제로 플러그인을 <ngb-tab> 에 적용하는 것입니다. 이 플러그인은 나중에 <ul role="tablist" ... > 로 대체됩니다.

@tommykamkcm 걱정 마세요. 구성 요소가 렌더링된 후 지시문을 추가하려고 합니다. 내일 시도해 보겠습니다. 최대한 빨리 연락드리겠습니다.

@tommykamkcm 답변이 늦어서 죄송합니다. 나는 ng-tab 를 약간 가지고 놀았고 이전 구현에서와 같이 약간의 해킹을 사용하지 않고는 작동하게 만들 수 없습니다.

@bfwg 걱정 마세요. 해킹이 있고 작동하는 한 모두가 긴장을 풀어야 합니다.

해킹을 수행하는 메서드, 즉 플러그인을 DOM 요소에 동적으로 적용할 수 있다면 좋을 것입니다!

어쨌든 지원해주셔서 다시 한 번 감사드립니다! 정말 감사합니다!

안녕하세요 @tommykamkcm , 저는 플러그인에서 원하는 것을 수행하는 attach() 메소드를 사용하고 있습니다.

"DOM 요소에 플러그인을 동적으로 적용"

거의 완료되었습니다. 풀 리퀘스트가 준비되면 검토하시겠습니까?
큰 지연에 대해 죄송합니다. 😞

안녕하세요 @bfww 걱정하지 마세요. 도와주셔서 정말 감사합니다! 코드를 읽기만 하면 모든 것이 좋아 보입니다! 다시 한번 감사합니다!

안녕하세요 @tommykamkcm / @bfwg 스크롤이 있는 ngb-tabs용 데모를 드롭해 주시겠습니까?

감사 해요