ngif導致頁面重新加載-Angular 2

Question

我試圖在接收搜索結果時顯示一個組件，導致事件發射器關閉，導致onResultsRecieved()執行。

但是頁面只是重新加載。 因此，我對其進行了調試，並且當代碼進入onResultsRecieved() ，當它運行this.results.scroll()它會導致異常，提示“ TypeError：無法讀取未定義的'scroll'屬性”，然后重新加載頁面。

scroll()是結果viewchild上的方法。

為什么results不確定？ 為什么異常永遠不會顯示在控制台中，而是重新加載頁面？

涉及的所有代碼：

find-page.component.html

<div id="find-page">
   <find-form (onResultsRecieved)="onResultsRecieved($event)"></find-form>
</div>
<results-div #results *ngIf="showResults"></results-div>

find-page.component.ts

import { Component, ViewChild } from '@angular/core';
import { NavbarComponent } from '../shared/navbar.component';
import { FindFormComponent } from '../find-page/find-form.component';
import { ResultsComponent } from '../find-page/results.component';

@Component({
   selector: 'find-page',
   templateUrl: 'app/find-page/find-page.component.html',
   styleUrls: ['app/find-page/find-page.component.css' ],
   directives: [ FindFormComponent, ResultsComponent ]
})
export class FindPageComponent {
   showResults = false;
    @ViewChild('results') results;

     onResultsRecieved(recieved: boolean) {
        if ( recieved ) {
           this.showResults = true;
           this.results.scroll();
        }else {
           this.showResults = false;
        }
  }
}

results.component.ts：

import { Component, AfterViewInit } from '@angular/core';

@Component({
   selector: 'results-div',
   templateUrl: 'app/find-page/results.component.html',
   styleUrls: ['app/find-page/results.component.css' ]
})
export class ResultsComponent implements AfterViewInit {

   ngAfterViewInit() {
ScrollToAnchor.goToTargetBottom("#results-page");
   }

   scroll() {
      ScrollToAnchor.goToTargetBottom("#results-page");
   }
}

results.component.html:

<div id="results-page"></div>

相關的CSS：

#results-page {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 50px; }

Answer 1

看來您正在使用表單，但是，我在任何地方都看不到實際的代碼，因此這僅是一個有根據的猜測。 我遇到了一個非常相似的問題（這是我偶然發現的一個問題），並且非常容易解決。

提交表單時，即使沒有動作屬性，它也會嘗試將您帶到action屬性定義的任何位置（在這種情況下，表單只是重新加載當前頁面）。 為避免這種情況，請添加onSubmit="return false;" 到表單標簽，這將防止表單提交后嘗試更改頁面。

希望這可以幫助。