typescript - 单击组件上的任何位置时Angular5奇怪的滚动-Chrome
问题描述
我正在我的应用程序中添加一个新组件(这是一个已经投入生产的应用程序)我的组件有问题。每次我单击组件中的任何位置时,看起来角核心中的某些东西都会导致滚动到页面顶部。
我向组件添加了一个点击事件,以查看之后的确切位置。我不太确定如何阻止这种行为,我花了几天时间试图阻止它,但到目前为止我还没有运气。
请查看下面的一些屏幕截图和代码(我清除了我的组件两次,只是为了显示一段文本,它仍然会发生,所以它不是组件内的任何东西 - 我知道)
任何帮助将非常感激
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>
它似乎导致滚动(导致滚动的行的图像)
解决方案
奇怪的行为是由使用相同模板的 2 个组件引起的。
我有这个奇怪的设置,因为组件代码在一个共享的 npm 包中。我认为拥有相同的模板不会影响行为,因为我没有使用其中一个组件,但我错了。
推荐阅读
- r - 更改 for 循环中引用的列索引
- r - 根据函数参数创建一系列具有名称的变量
- php - 如何更新现有Excel工作表中的一行数据并动态更新其相关列值
- sql-server - 尝试从另一台服务器中可用链接服务器的脚本创建新的链接服务器。某些服务器上的连接测试失败
- spring - 如何使用权限检查而不是角色检查来实现 RBAC(在 Spring 中)
- batch-file - 如何使用 (RunProgram) 最小化运行
- python - 如何使用 BeautifulSoup 从 div 下的多个相同类中抓取数据
- python - 在熊猫数据框中更新日期格式
- arrays - Angular ngfor 不呈现列表
- regex - RegExp:用于捕获组的 If-Clause 可能吗?