Ngx-drag-scroll: рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдЗрдВрдбреЗрдХреНрд╕ рд╕реЗ рдПрдирдЬреАрдПрдХреНрд╕-рдбреНрд░реИрдЧ-рд╕реНрдХреНрд░реЙрд▓ рд╢реБрд░реВ рдХрд░рдирд╛

рдХреЛ рдирд┐рд░реНрдорд┐рдд 21 рдЕрдХреНрддреВре░ 2018  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: bfwg/ngx-drag-scroll

  • рдореИрдВ рдПрдХ рдЬрдорд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ ...

    • [ ] рдмрдЧ рд░рд┐рдкреЛрд░реНрдЯ
    • [x] рд╕реБрд╡рд┐рдзрд╛ рдЕрдиреБрд░реЛрдз
    • [ ] рд╕рдорд░реНрдерди рдЕрдиреБрд░реЛрдз => рдХреГрдкрдпрд╛ рдпрд╣рд╛рдВ рд╕рдорд░реНрдерди рдЕрдиреБрд░реЛрдз рд╕рдмрдорд┐рдЯ рди рдХрд░реЗрдВ, рдЗрд╕ рдЯреЗрдореНрдкрд▓реЗрдЯ рдХреЗ рд╢реАрд░реНрд╖ рдкрд░ рдиреЛрдЯ рджреЗрдЦреЗрдВред
  • рдХреНрдпрд╛ рдЖрдк рдХрд┐рд╕реА рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЕрдиреБрд░реЛрдз рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдпрд╛ рдХрд┐рд╕реА рдмрдЧ рдХреА рд░рд┐рдкреЛрд░реНрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ?

рдХреНрдпрд╛ рдбреНрд░реИрдЧрд╕реНрдХреНрд░реЙрд▓ рдХреЛ 0 рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдЕрдиреНрдп рдЗрдВрдбреЗрдХреНрд╕ рд╕реЗ рд╢реБрд░реВ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реИ?

  • рд╡рд░реНрддрдорд╛рди рд╡реНрдпрд╡рд╣рд╛рд░ рдХреНрдпрд╛ рд╣реИ?
    рдЕрднреА, рдбреНрд░реИрдЧрд╕реНрдХреНрд░реЙрд▓ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рдкрд╣рд▓реА рдЫрд╡рд┐/рдШрдЯрдХ рд╕реЗ рдкреНрд░рд╛рд░рдВрдн рд╣реЛ рд░рд╣рд╛ рд╣реИред

  • рд╡реНрдпрд╡рд╣рд╛рд░ рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░реЗрд░рдгрд╛/рдЙрдкрдпреЛрдЧ рдХрд╛ рдорд╛рдорд▓рд╛ рдХреНрдпрд╛ рд╣реИ?
    рдЗрдВрдбреЗрдХреНрд╕ рдХреЛ рдЪреБрдирдирд╛ рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ рдЬрд╣рд╛рдВ рдбреНрд░реИрдЧрд╕реНрдХреНрд░реЙрд▓ (рд▓реЛрдб рдкрд░) рд╢реБрд░реВ рдХрд░рдирд╛ рд╣реИред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдЖрдк рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ `ngAfterViewInit рдмреНрд▓реЙрдХ рдореЗрдВ moveTo рдкрд░ рдХреЙрд▓ рдХрд░рдХреЗ рдкреНрд░рд╛рд░рдВрднрд┐рдХ рдЕрдиреБрдХреНрд░рдордгрд┐рдХрд╛ рд╕реЗрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдХреЙрд▓ рдХреЛ рд╕реЗрдЯрдЯрд╛рдЗрдордЖрдЙрдЯ (() => {...}, 0) рдХреЗ рд╕рд╛рде рд▓рдкреЗрдЯрдирд╛ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░реЗрдВ;
рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП:

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

рд╕рднреА 7 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЖрдк рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ `ngAfterViewInit рдмреНрд▓реЙрдХ рдореЗрдВ moveTo рдкрд░ рдХреЙрд▓ рдХрд░рдХреЗ рдкреНрд░рд╛рд░рдВрднрд┐рдХ рдЕрдиреБрдХреНрд░рдордгрд┐рдХрд╛ рд╕реЗрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдХреЙрд▓ рдХреЛ рд╕реЗрдЯрдЯрд╛рдЗрдордЖрдЙрдЯ (() => {...}, 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)

рдХреНрдпрд╛ рдЖрдк moveTo рдХреЛ ngAfterViewInit рдмреНрд▓реЙрдХ рдореЗрдВ рдХреЙрд▓ рдХрд░ рд░рд╣реЗ рд╣реИрдВ? рдкреГрд╖реНрда рдкрд░ рдбреНрд░реИрдЧ рд╕реНрдХреНрд░реЙрд▓ рдХреИрд░реЛрд╕реЗрд▓ рддрддреНрд╡ рджрд┐рдЦрд╛рдИ рджреЗрдиреЗ рдкрд░ moveTo рд╡рд┐рдзрд┐ рдХреЛ рдХреЙрд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред
рдпрд╛ рдЖрдк рдереЛрдбрд╝рд╛ рд╡рд┐рд▓рдВрдм рдЬреЛрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдкреБрдирдГ рдкреНрд░рдпрд╛рд╕ рдХрд░реЗрдВ рдЬреИрд╕реЗ:

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

рдореБрдЭреЗ рдмрддрд╛рдПрдВ рдХрд┐ рдХреНрдпрд╛ рд╡рд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдореИрдВрдиреЗ рдХрд┐рдпрд╛ред рд▓реЗрдХрд┐рди 1s рдХреЗ рдЯрд╛рдЗрдордЖрдЙрдЯ рдХреЗ рд╕рд╛рде рдЕрдм рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ! рдорджрдж рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдпрд╣ рдереЛрдбрд╝рд╛ рд╣реИрдХреА рд╣реИред

рд╣рдореНрдо, рдХреЛрдб рдХреЛ рджреЗрдЦреЗ рдмрд┐рдирд╛ рдореИрдВ рдпрд╣ рдирд╣реАрдВ рд╕рдордЭ рд╕рдХрддрд╛ рдХрд┐ ngAfterViewInit рдЖрдкрдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХреНрдпреЛрдВ рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдореИрдВ рдХрд╣реВрдВрдЧрд╛ рдХрд┐ рдЗрд╕ рд╕реБрд╡рд┐рдзрд╛ рдХреЗ рд╕рдорд╛рдкреНрдд рд╣реЛрдиреЗ рддрдХ рдЕрднреА рдХреЗ рд▓рд┐рдП setTimeout рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред рдПрдХ рдкреАрдЖрд░ рд╕реНрд╡рд╛рдЧрдд рд╕реЗ рдЕрдзрд┐рдХ рд╣реИред

рдЖрдк рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ `ngAfterViewInit рдмреНрд▓реЙрдХ рдореЗрдВ moveTo рдкрд░ рдХреЙрд▓ рдХрд░рдХреЗ рдкреНрд░рд╛рд░рдВрднрд┐рдХ рдЕрдиреБрдХреНрд░рдордгрд┐рдХрд╛ рд╕реЗрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдХреЙрд▓ рдХреЛ рд╕реЗрдЯрдЯрд╛рдЗрдордЖрдЙрдЯ (() => {...}, 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 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

MortezaT picture MortezaT  ┬╖  11рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

suresh2018 picture suresh2018  ┬╖  22рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

IlCallo picture IlCallo  ┬╖  12рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

IlCallo picture IlCallo  ┬╖  14рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

bfwg picture bfwg  ┬╖  13рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ