按钮单击是刷新页面 Kendo Angular ToolBar 溢出按钮
Posted
技术标签:
【中文标题】按钮单击是刷新页面 Kendo Angular ToolBar 溢出按钮【英文标题】:Button Click is refreshing page Kendo Angular ToolBar Overflow button 【发布时间】:2020-03-13 16:09:41 【问题描述】:我正在使用剑道角度工具栏。当用户调整屏幕溢出按钮时可见。但是点击它会刷新页面。看起来它正在回发。
这是我的代码:
<kendo-toolbar [overflow]="true" [style.width.%] = "100" >
<ng-container *ngFor ="let actionBtnItem of actionBtn">
<kendo-toolbar-button *ngIf="(actionBtnItem.name == 'Delete' && !isStandard) || actionBtnItem.name != 'Delete'"
[text]="actionBtnItem.name" type="button"
[icon]= "actionBtnItem.icon.split('k-i-')[1]" [className]="(isTopBottomFilterApplied && actionBtnItem.name == 'Top/Bottom' ) ? 'k-button k-state-selected': ''"
(click)="show(actionBtnItem.value, $event)">
</kendo-toolbar-button>
</ng-container>
<kendo-toolbar-splitbutton [data]="downloadData" type="button" [text]="'Download'">Download</kendo-toolbar-splitbutton>
</kendo-toolbar>
我尝试了kendo ui - why do button click refresh the page? 此处提供的解决方案并添加了 type="button" 但它仅适用于我的本地环境。在 asp.net 中部署时它不起作用。
我尝试在我的 js 文件中执行此操作,但这也无济于事。
$('#action-button-component .k-overflow-anchor').click(function (e)
e.preventDefault();
);
【问题讨论】:
【参考方案1】:如果工具栏放置在表单内并单击溢出按钮,则页面将刷新,如下例所示:
https://stackblitz.com/edit/angular-2pfqpa-1kn4kz?file=app/app.component.ts
确实,这是 2.2.0 版 Angular 工具栏包的 Kendo UI 中的一个错误。
可以通过以编程方式添加属性 type="button" 来避免这种情况,如下所示:
ngAfterViewInit() document.querySelector('.koverflowanchor').setAttribute('type','button');
【讨论】:
以上是关于按钮单击是刷新页面 Kendo Angular ToolBar 溢出按钮的主要内容,如果未能解决你的问题,请参考以下文章