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

Question

我正在我的应用程序中添加一个新组件（这是已经在生产中的应用程序），我对该组件有问题。每次我在组件内的任何位置单击时，似乎都有角铁芯中的某些内容导致滚动到页面顶部。

我向组件添加了一个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>

似乎正在引起滚动（导致滚动的线条图像）

Answer 1

奇怪的行为是由具有相同模板的2个组件引起的。

由于组件代码位于共享的npm包中，所以我进行了奇怪的设置。我认为拥有相同的模板不会影响行为，因为我没有使用组件之一，但是我错了。