Ngx-drag-scroll: ์ง€์ •๋œ ์ธ๋ฑ์Šค์—์„œ ngx-drag-scroll ์‹œ์ž‘

์— ๋งŒ๋“  2018๋…„ 10์›” 21์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: bfwg/ngx-drag-scroll

  • ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค...

    • [ ] ๋ฒ„๊ทธ ๋ณด๊ณ ์„œ
    • [x] ๊ธฐ๋Šฅ ์š”์ฒญ
    • [ ] ์ง€์› ์š”์ฒญ => ์ง€์› ์š”์ฒญ์„ ์—ฌ๊ธฐ์— ์ œ์ถœํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค. ์ด ํ…œํ”Œ๋ฆฟ ์ƒ๋‹จ์˜ ์ฐธ๊ณ  ์‚ฌํ•ญ์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.
  • ๊ธฐ๋Šฅ ์„ ์š”์ฒญํ•˜๊ฑฐ๋‚˜ ๋ฒ„๊ทธ ๋ฅผ ๋ณด๊ณ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

0์ด ์•„๋‹Œ ๋‹ค๋ฅธ ์ธ๋ฑ์Šค์—์„œ ๋“œ๋ž˜๊ทธ ์Šคํฌ๋กค์„ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

  • ํ˜„์žฌ ํ–‰๋™์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
    ํ˜„์žฌ ๋“œ๋ž˜๊ทธ ์Šคํฌ๋กค์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ฒซ ๋ฒˆ์งธ ์ด๋ฏธ์ง€/๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค.

  • ํ–‰๋™์„ ๋ฐ”๊พธ๋Š” ๋™๊ธฐ/์‚ฌ์šฉ ์‚ฌ๋ก€๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
    ๋“œ๋ž˜๊ทธ ์Šคํฌ๋กค์„ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค(๋กœ๋“œ ์‹œ).

feature request

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์‹ค์ œ๋กœ `ngAfterViewInit ๋ธ”๋ก์—์„œ moveTo ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ดˆ๊ธฐ ์ธ๋ฑ์Šค๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. setTimeout(() => {...}, 0)์œผ๋กœ ํ˜ธ์ถœ์„ ๋ž˜ํ•‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด:

  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
  ngAfterViewInit() {
    setTimeout(() => {
      this.ds.moveTo(3);
    }, 0);
  }

๋ชจ๋“  7 ๋Œ“๊ธ€

์‹ค์ œ๋กœ `ngAfterViewInit ๋ธ”๋ก์—์„œ moveTo ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ดˆ๊ธฐ ์ธ๋ฑ์Šค๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. setTimeout(() => {...}, 0)์œผ๋กœ ํ˜ธ์ถœ์„ ๋ž˜ํ•‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด:

  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
  ngAfterViewInit() {
    setTimeout(() => {
      this.ds.moveTo(3);
    }, 0);
  }

์ด๋ฏธ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค .. ๋ถˆํ–‰ํžˆ๋„ ๋งค๋ฒˆ์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

core.js:1673 ERROR TypeError: Cannot read property '_elementRef' of undefined at DragScrollComponent.push../node_modules/ngx-drag-scroll/lib/ngx-drag-scroll.js.DragScrollComponent.maximumIndex (ngx-drag-scroll.js:415) at DragScrollComponent.push../node_modules/ngx-drag-scroll/lib/ngx-drag-scroll.js.DragScrollComponent.moveTo (ngx-drag-scroll.js:214) at myComponent.component.ts:141 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3815) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2054)

ngAfterViewInit ๋ธ”๋ก ๋‚ด์—์„œ $ moveTo ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? moveTo ๋ฉ”์„œ๋“œ๋Š” ๋“œ๋ž˜๊ทธ ์Šคํฌ๋กค ์บ๋Ÿฌ์…€ ์š”์†Œ๊ฐ€ ํŽ˜์ด์ง€์— ํ‘œ์‹œ๋  ๋•Œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋˜๋Š” ์•ฝ๊ฐ„์˜ ์ง€์—ฐ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‹ค์‹œ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    setTimeout(() => {
      this.ds.moveTo(3);
    }, 1000);

์ž‘๋™ํ•˜๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”.

๋‚˜๋Š” ํ–ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ 1์ดˆ์˜ ์‹œ๊ฐ„ ์ดˆ๊ณผ๋กœ ์ด์ œ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค! ์•ฝ๊ฐ„ ํ•ดํ‚น์ด์ง€๋งŒ ๋„์›€์„ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

ํ , ์ฝ”๋“œ๋ฅผ ๋ณด์ง€ ์•Š๊ณ ๋Š” ngAfterViewInit ์ด ์™œ ๋‹น์‹ ์—๊ฒŒ ํšจ๊ณผ๊ฐ€ ์—†๋Š”์ง€ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ์€ ์ด ๊ธฐ๋Šฅ์ด ์‚ฌ๋ผ์งˆ ๋•Œ๊นŒ์ง€ setTimeout ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. PR ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ `ngAfterViewInit ๋ธ”๋ก์—์„œ moveTo ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ดˆ๊ธฐ ์ธ๋ฑ์Šค๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. setTimeout(() => {...}, 0)์œผ๋กœ ํ˜ธ์ถœ์„ ๋ž˜ํ•‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด:

  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
  ngAfterViewInit() {
    setTimeout(() => {
      this.ds.moveTo(3);
    }, 0);
  }

์•ˆ๋…•ํ•˜์„ธ์š” ๋ฌธ์„œ์— ์ด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค.

์ด ์†”๋ฃจ์…˜์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์ด ํŠน์ • ํ•ญ๋ชฉ์œผ๋กœ ์ด๋™ํ•˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‚ฌ์šฉ์ž์—๊ฒŒ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
์•„๋ž˜์— ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค. ๊ดœ์ฐฎ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹œ๋‚˜์š”?

ngAfterViewInit(){
  setTimeout(()=>{
    this.ds.currIndex = 3;
    this.ds._elementRef.nativeElement.children[0].scrollLeft = someValue;
  }, 10);
}
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰