Прокрутите верхнюю страницу, когда сработает следующая - PullRequest
Новая
       57

Прокрутите верхнюю страницу, когда сработает следующая

0 голосов
/ 04 мая 2020

У меня angular 8 приложений.

И у меня есть несколько кнопок навигации: следующий и предыдущий.

Но я хочу, чтобы, когда пользователь нажимал «Далее», следующая страница начиналась сверху страницы. а не там, где осталось прежнее состояние. Итак, я попытался с 

nativeElement.scrollTo(0, 0);

Но тогда я получу ошибку.

Так что это ссылки навигации: EcheqProcessComponent 


 <app-echeq-page #scrollMe
      *ngIf="!submitting"
      [currentEcheqPage]="currentEcheqPage"
      [currentEcheqPager]="currentEcheqPager"
    ></app-echeq-page> 

 <app-echeq-progress-nav
      *ngIf="!submitting"
      [currentPage]="currentEcheqPageIdx + 1"
      [totalPages]="currentEcheqPath.length"
      (next)="next()"
      (previous)="prev()"

      [isbtnDisabled]="currentEcheqSubmission?.status === EcheqSubmissionStatus.EXPIRED"

      [conditionals]="{
        isFirst: currentEcheqPager.isFirst,
        sending: sending
      }"
    ></app-echeq-progress-nav>

, и это у меня есть для страница, когда вам нужно переместиться вверх страницы: EcheqPageComponent 


export class EcheqPageComponent implements OnInit, AfterViewInit {
  @ViewChild('scrollMe', { static: false }) private contentPageRef: ElementRef;
  @Input() currentEcheqPage: EcheqPage;
  @Input() currentEcheqPager: EcheqPager;
  // We use template variables to query the components
  @ViewChildren('echeqElement') elementComponents: QueryList<EcheqElementComponent>;

  EcheqElement = EcheqElement;
  elementsChanged = true;

  constructor(private echeqService: EcheqService) {}

  ngOnInit() {}

  ngAfterViewInit() {
    this.scrollOnTopPage();
  }


  private scrollOnTopPage(): void {
    this.contentPageRef.nativeElement.scrollTo(0, 0);
  }
}

Но тогда я получаю эту ошибку: 

echeq-process.component.html:13 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at EcheqPageComponent.push../src/app/echeq/echeq-page/echeq-page.component.ts.EcheqPageComponent.scrollOnTopPage (echeq-page.component.ts:79)

Так что я должен изменить?

Спасибо

Вы имеете в виду, как это? 

  <app-echeq-page #scrollMe
      [hidden]="submitting"
      [currentEcheqPage]="currentEcheqPage"
      [currentEcheqPager]="currentEcheqPager"
    ></app-echeq-page>

У меня сейчас это так: 

 <app-echeq-page #scrollMe
     *ngIf="!submitting"
      [currentEcheqPage]="currentEcheqPage"
      [currentEcheqPager]="currentEcheqPager"
    ></app-echeq-page>

и это: 

  ngAfterViewInit() {
    setTimeout(() => {
       this.scrollOnTopPage();
    }, 1000) ;
 }

но все равно получаю эту ошибку: 

core.js:7376 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at EcheqPageComponent.push../src/app/echeq/echeq-page/echeq-page.component.ts.EcheqPageComponent.scrollOnTopPage (echeq-page.component.ts:81)
    at echeq-page.component.ts:29
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:26760)
    at

Но это очень большая страница: EcheqPageComponent. html

<div class="echeq-page">
  <h4 class="echeq-title">{{ currentEcheqPage.title }}</h4>

  <div class="echeq-page-elementcontainer">
    <ng-container *ngFor="let element of currentEcheqPage.elements" [ngSwitch]="element.type">
      <app-html-display
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [currentEcheqPager]="currentEcheqPager"
        *ngSwitchCase="EcheqElement.HTML_DISPLAY"
      ></app-html-display>
      <app-youtube-player *ngSwitchCase="EcheqElement.VIDEO_DISPLAY" [url]="element.videoUrl"></app-youtube-player>
      <div class="echeq-element-media echeq-element-media-image" *ngSwitchCase="EcheqElement.IMAGE_DISPLAY">
        <img class="echeq-element-media-image" [src]="getValidImageUrl(element)" alt="Afbeelding" />
      </div>
      <app-bool-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.BOOL_QUESTION"
      ></app-bool-question>
      <app-int-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.INT_QUESTION"
      ></app-int-question>
      <app-str-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.STR_QUESTION"
      ></app-str-question>
      <app-date-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.DATE_QUESTION"
      ></app-date-question>
      <app-date-time-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.DATE_TIME_QUESTION"
      ></app-date-time-question>
      <app-time-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.TIME_QUESTION"
      ></app-time-question>
      <app-num-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.NUM_QUESTION"
      ></app-num-question>
      <app-str-list-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.STR_LIST_QUESTION"
      ></app-str-list-question>
      <app-str-enum-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.STR_ENUM_QUESTION"
      ></app-str-enum-question>
      <app-num-enum-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.NUM_ENUM_QUESTION"
      ></app-num-enum-question>
      <app-num-enum-set-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.NUM_ENUM_SET_QUESTION"
      ></app-num-enum-set-question>
      <app-str-enum-set-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.STR_ENUM_SET_QUESTION"
      ></app-str-enum-set-question>
      <app-bool-set-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchCase="EcheqElement.BOOL_SET_QUESTION"
      ></app-bool-set-question>
      <app-bool-question
        class="echeq-page-element"
        #echeqElement
        [answer]="getAnswerFor(element)"
        [echeqElement]="element"
        [isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
        *ngSwitchDefault
      ></app-bool-question>
    </ng-container>
  </div>
</div>

1 Ответ

0 голосов
/ 04 мая 2020

Также проверьте отправку в компоненте: 

export class EcheqPageComponent implements OnInit, AfterViewInit  {
  @ViewChild(EcheqPageComponent, { static: false, read: ElementRef }) private contentPageRef: ElementRef<EcheqPageComponent>;
  ...

  ngAfterViewInit() {
    this.scrollOnTopPage();
  }

  private scrollOnTopPage() {
    if(!this.submitting) {
      this.contentPageRef.nativeElement.scrollTo(0, 0)
    }
  }
}

и прикрепите стиль для компонента EcheqPageComponent, поскольку ваша прокрутка может не работать

...