ngif导致页面重新加载-Angular 2 [英] ngif causing page to reload - Angular 2

问题描述

我正在尝试在接收到搜索结果时显示一个组件，导致事件发射器关闭，导致执行 onResultsRecieved().

I'm trying to display a component when search results are recieved, causing an event emitter to go off, causing onResultsRecieved() to execute.

但是页面只是重新加载.因此，我对其进行了调试，并且当代码进入 onResultsRecieved()时，当其运行 this.results.scroll()时，它会导致异常，提示"TypeError:无法读取属性未定义的滚动"，然后重新加载页面.

However the page just reloads. So I debugged it, and when the code goes into onResultsRecieved(), when it runs this.results.scroll() it causes an exception that says "TypeError: Cannot read property 'scroll' of undefined" and then the page just reloads.

scroll()是结果子视图上的一种方法.

scroll() is a method on the results viewchild.

为什么未定义结果?为什么异常永远不会显示在控制台中，而是重新加载页面?

Why is results undefined? and why does the exception never show in the console, and instead reload the page?

涉及的所有代码:

find-page.component.html

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

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:

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; }

推荐答案

看来您正在使用表单，但是，我看不到任何附加的实际代码，因此这只是一个有根据的猜测.我遇到了一个非常相似的问题(这是我偶然发现的一个问题)，并且非常容易解决.

It appears you are using a form, however, I don't see the actual code attached anywhere so this is just going to have to be an educated guess. I was having a very similar problem (which is how I stumbled across this question), and it was fixed very easily.

提交表单时，即使没有action属性，表单也会尝试将您带到 action 属性定义的位置(在这种情况下，表单只是重新加载当前页面).为了避免这种情况，请将 onSubmit ="return false;" 添加到您的表单标签中，这样可以防止表单在提交表单后尝试更改页面.

When you submit a form it will try to take you to wherever the action attribute defines, even if there is no action attribute (in which case the form simply reloads the current page). To avoid this, add onSubmit="return false;" to your form tag, this will prevent the form from attempting to change the page once the form is submitted.

希望这会有所帮助.

这篇关于ngif导致页面重新加载-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！