按钮单击是刷新页面 Kendo Angular ToolBar 溢出按钮答案

【问题标题】：Button Click is refreshing page Kendo Angular ToolBar Overflow button按钮单击是刷新页面 Kendo Angular ToolBar 溢出按钮
【发布时间】：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();            
});

【问题讨论】：

标签： javascript angular kendo-ui kendo-asp.net-mvc kendo-ui-angular2

【解决方案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'); }

【讨论】：