有人能告诉我为什么(click)= handleEdit($ event)不起作用?我用下面的html加粗了。它正在使用primeng p按钮。我发布了一个类似的问题,但我认为这个问题更重要。
<div class="ui-g-12 ui-md-10 ui-g-nopad">
<div class="ui-g-12">
<p-toolbar id="toolbarId">
<div class="ui-toolbar-group-left">
**<button pButton type="button" label="Edit" icon="pi pi-search" id="editBtn" class="ui-button-danger" (click)="handleEdit($event)"></button>**
</div>
<div class="ui-toolbar-group-right">
<button pButton type="button" icon="pi pi-search" id="searchId"></button>
<button pButton type="button" icon="pi pi-calendar" class="ui-button-success"
id="calendarBtn"></button>
<button pButton type="button" icon="pi pi-times" class="ui-button-danger" id="exitBtn"></button>
</div>
</p-toolbar>
</div>
<router-outlet></router-outlet>
</div>
export class HomescreenComponent implements OnInit {
title = 'niche-app Home';
appMenu: AppMenu;
constructor(private appMenuService: AppMenuService) { }
items: MenuItem[];
ngOnInit() {
this.appMenu = this.appMenuService.getAppMenu();
...
}
handleEdit() {
console.log("handleEdit(): Called...");
}
}
<div class="ui-toolbar-group-left">
<button
pButton
type="button"
label="Edit"
icon="pi pi-search"
id="editBtn"
class="ui-button-danger"
(click)="handleEdit($event)">
Hello
</button>
</div>
请复制粘贴页面中的html并单击按钮。我已经在控制台中进行了测试和打印
我解决了这个问题。 router-outlet标签需要移动到p-toolbar标签下方。让它成为原因导致它不是主屏幕父组件的子项。
一旦我移动了homescreen.html文件中的路由器插座位置,它就开始响应(点击)事件。
感谢guptarahul275花时间回答我的问题。
<div class="ui-g-12 ui-md-10 ui-g-nopad">
<div class="ui-g-12">
<p-toolbar id="toolbarId">
<div class="ui-toolbar-group-left">
<button pButton type="button" label="New" icon="pi pi-plus" id="newBtn"></button>
<button pButton type="button" label="Edit" icon="pi pi-search" id="editBtn" class="ui-button-danger" (click)="handleEdit($event)"></button>
<button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"
id="uploadBtn"></button>
<i class="pi pi-bars"></i>
<p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"
id="saveBtn"></p-splitButton>
</div>
<div class="ui-toolbar-group-right">
<button pButton type="button" icon="pi pi-search" id="searchId"></button>
<button pButton type="button" icon="pi pi-calendar" class="ui-button-success"
id="calendarBtn"></button>
<button pButton type="button" icon="pi pi-times" class="ui-button-danger" id="exitBtn"></button>
</div>
</p-toolbar>
<router-outlet></router-outlet>
</div>
**router-outlet used to be here**
</div>