触发 next 时在首页滚动

Question

我有 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>

当您必须在 page: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>

Answer 1

同时检查组件中的提交：

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 组件附加样式，因为您的滚动条可能无法正常工作

触发 next 时在首页滚动

Scroll on top page when next is triggered

javascript

typescript

angular

react-native-elements