PrimeNG 菜单项命令绑定到基类函数答案

【问题标题】：PrimeNG menu item command binding to base class functionPrimeNG 菜单项命令绑定到基类函数
【发布时间】：2017-10-08 20:42:13
【问题描述】：

我正在尝试将基类函数绑定到我的 Angular 2 PrimeNG 菜单项。

HTML

<p-menu #menu popup="popup" [model]="exportItems"></p-menu>
<button type="button" class="fa fa-download" title="Export As" (click)="menu.toggle($event)"></button>

打字稿

exportItems: MenuItem[];

//Inside NgOnInit
this.exportItems = [
{ label: 'SVG', command: super.ExportSVG },
{ label: 'PNG', command: super.ExportPNG }];

//Error here 
//Cannot read property 'canvasID' of undefined
ExportSvg(): void
{
    var canvas = document.getElementById(this.canvasID) as HTMLCanvasElement;
    .....

}

我认为绑定到命令时无法解析基类函数。任何线索如何解决这个问题？

【问题讨论】：

标签： angular typescript primeng

【解决方案1】：

我通过以下命令绑定解决了这个问题。

this.exportItems = [
{ label: 'SVG', command: (onclick)=> {super.ExportSVG()} },
{ label: 'PNG', command: (onclick)=> {super.ExportPNG()} }];

似乎绑定菜单项的onClick事件时效果很好。

【讨论】：

为了清楚起见，这不是 angular (onClick) 函数，因为 MenuItem 在单击它时会将菜单项传递给命令。所以，我们真正拥有的是一个名为 onClick 的变量，它是这个匿名函数中的菜单项。它不明显的原因是变量 (onClick) 没有在匿名函数中使用。