Typescript Angular5单击组件上的任意位置时会出现奇怪的滚动-Chrome

Typescript Angular5单击组件上的任意位置时会出现奇怪的滚动-Chrome,typescript,scroll,components,angular5,Typescript,Scroll,Components,Angular5,我正在我的应用程序中添加一个新组件(这是一个已经投入生产的应用程序),但该组件有问题。每次我单击组件中的任何位置时,看起来像是角内核中的某个东西导致滚动到页面顶部 我在组件中添加了一个click事件,以查看之后的确切位置。我真的不知道如何阻止这种行为,我花了几天时间试图阻止它,但到目前为止,我还没有任何运气 请看下面的一些屏幕截图和代码(我清除了我的组件两次,只是为了显示一段文本,但它仍然会发生,所以它不是组件中的任何东西——我知道) 任何帮助都将不胜感激 import { Component,

我正在我的应用程序中添加一个新组件(这是一个已经投入生产的应用程序),但该组件有问题。每次我单击组件中的任何位置时,看起来像是角内核中的某个东西导致滚动到页面顶部

我在组件中添加了一个click事件,以查看之后的确切位置。我真的不知道如何阻止这种行为,我花了几天时间试图阻止它,但到目前为止,我还没有任何运气

请看下面的一些屏幕截图和代码(我清除了我的组件两次,只是为了显示一段文本,但它仍然会发生,所以它不是组件中的任何东西——我知道)

任何帮助都将不胜感激

import { Component, Inject, Input } from '@angular/core';
import { Transitions } from '../../../shared/services/transitions/transitions';

@Component({
  selector: 'app-niche',
  templateUrl: 'src/app/html/details/panels/niche/niche.component.html',
  animations: [Transitions.fadeTransition(400)]
})

export class NicheComponent {
  @Input() isVisible: boolean;
  showHelpText = false;
  helpText = this.StaticMessages.nichePolicyTypeHelpText;

  constructor(@Inject('AppSettings')  public AppSettings?,
              @Inject('StaticMessages')  public StaticMessages?) {

  }

  returnFalse(event) {
    event.preventDefault();
    return false;
  }
}
模板

<div *ngIf="isVisible" (click)="returnFalse($event)" @fade>
  <div class="row">
  <div class="col col-sm-12 panel">
    <div class="row">
      <div class="col col-xs-12 col-sm-12 col-md-6">
        <h1 class="p-title">
          <span class="no-padding-x">What kind of niche policy are you looking for?</span><br/>
          <span class="no-padding-x"><i (click)="showHelpText = !showHelpText" class="material-icons cursor help-button">{{ (showHelpText) ? 'highlight_off' : 'info_outline' }}</i></span>
        </h1>
        <div class="help-content" [innerHtml]="helpText" *ngIf="showHelpText" @fade></div>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6">
        <mat-list id="niche-types" class="selectable-list">
          <mat-list-item>Test1</mat-list-item>
          <mat-list-item>Test2</mat-list-item>
          <mat-list-item>Test3</mat-list-item>
        </mat-list>
      </div>
    </div>
  </div>
  </div>
  <hr />
</div>

您想要什么样的利基政策?
{(showHelpText)?'highlight_off':'info_outline'} 测试1 测试2 测试3
它似乎是导致滚动的原因(导致滚动的行的图像)


这种奇怪的行为是由使用同一模板的两个组件引起的


我在一个共享的npm包中设置了这个奇怪的组件代码。我认为使用相同的模板不会影响行为,因为我没有使用其中一个组件,但我错了

我已经追根究底了。我有两个组件使用相同的模板,它们导致了这种奇怪的行为。