ngifによりページがリロードされる - 角2

Question

検索結果が受信されたときにコンポーネントを表示しようとしましたが、イベントエミッタがオフになり、onResultsRecieved()が実行されました。

ただし、ページがリロードされます。だから私はそれをデバッグし、コードがonResultsRecieved()に入り、this.results.scroll()が実行されると、 "TypeError：プロパティ 'scrollの未定義を読み取ることができません"というメッセージが表示され、ページがリロードされます。

scroll()は、結果ビューチャイルドのメソッドです。

なぜ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;"をフォームタグに追加します。これにより、フォームが送信された後にフォームがページを変更しようとしなくなります。

これが役に立ちます。