Angular ngif导致页面重新加载-角度2

我试图在收到搜索结果时显示组件，导致事件发射器关闭，导致执行

onresultsreceived（）

然而，页面只是重新加载。所以我调试了它，当代码进入

onresultsreceived（）

时，当它运行

this.results.scroll（）

时，它会导致一个异常，说“TypeError:无法读取未定义的属性'scroll'，然后页面就重新加载了

scroll（）

是结果视图子对象上的一个方法

为什么

结果
未定义？为什么控制台中从不显示异常，而是重新加载页面

所有涉及的代码：

find-page.component.html

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

结果.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>

看起来您正在使用一个表单，但是，我没有看到实际的代码附在任何地方，所以这只是一个有根据的猜测。我遇到了一个非常类似的问题（这就是我偶然发现这个问题的原因），并且很容易就解决了

当您提交表单时，它会尝试将您带到
action
属性定义的任何位置，即使没有action属性（在这种情况下，表单只需重新加载当前页面）。为了避免这种情况，请在表单标记中添加
onSubmit=“return false；”“
，这将防止表单在提交表单后尝试更改页面

希望这有帮助。
我可以告诉您，它未定义，因为作用域在该子对象可用之前正在调用scroll。据我所见，由于表单组件中的某些功能，您的事件正在被发出。你能提供那个代码吗？为什么要重新加载你的页面。。思想，但没有什么坚实的。可能是因为调用滚动条是一个函数名，并且它已经作为jquery事件存在，所以它在逻辑上摸索，遇到了故障保护。
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>

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