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