Question

我尝试使用angular2-contextmenu。根据其文档，这应该是可能的：

  <template contextMenuItem let-item [visible]="item.type === 'type1'" [enabled]="isMenuItemEnabled(item)" (execute)="alert('Hi, ' + $event.item.name); $event.event.preventDefault();">
    Say hi, {{item?.name}}!  <my-component [attribute]="item"></my-component>
    With access to the outside context: {{ outsideValue }}
  </template>

但是，当我尝试使用它时，item变量仅在模板本身中可用，但在[visible]="item==='somestring'"之类的表达式中不可用。

我尝试使用像

这样的东西

<template  contextMenuItem  let-item [enabled]="item == 'service-panel'">
    {{ item == 'service-panel' }} 
</template>

由于item未定义，因此评估为false：

[enabled]="item == 'service-panel'"

但表达式{{ item == 'service-panel' }}的计算结果为真。

上下文菜单包含以下模板，其中包含菜单项：

<template [ngTemplateOutlet]="menuItem.template" 
[ngOutletContext]="{ $implicit: item }"></template>

和班级：

@ContentChildren(ContextMenuItemDirective) public menuItems: QueryList<ContextMenuItemDirective>;

ContextMenuItemDirective具有enabled和visible输入属性。

export class ContextMenuItemDirective {
  @Input() public enabled: boolean = true;
  @Input() public visible: boolean = true;
  //...
}

这似乎可以使item变量可访问，但不能在[enabled]="item == 'service-panel'"等表达式中访问。

这是设计的，有没有办法访问该表达式中的item变量？

编辑：添加了plunker（稍微举了一些例子）：

如果[enabled]="isDefined(item)"替换为[enabled]="true"，则列表会更改，John会被删除，因此可以使用。

Answer 1

这是我的angular2-contextmenu库的文档中的错误。在我的应用程序中，我实际上是跟踪父组件中当前选定的项目，并在模板[可见]和[已启用]属性中使用它。

像这样：

onContextMenu($event: MouseEvent, item: any): void {
  this.selectedItem = item;
  this.cms.show.next({ event: $event, item: item });
  $event.preventDefault();
}

和

<template contextMenuItem let-item [enabled]="selectedItem?.name == 'John'">
  ..
</template>

我会更新文档，以便其他人不会走这条路。

编辑：

这是另一种选择。我可以接受enabled和visible输入的布尔值或函数。然后使用item值评估函数 - 这意味着您不必跟踪组件中的选定项目。

像这样：

// parent.component.ts
public canEnable(item: any): boolean {
  return item.type === 'type1';
}

// parent.component.html
<template contextMenuItem let-item [enabled]="canEnable">
  ..
</template>

在angular2-contextmenu@0.4.0

中实施

angular2 ngOutletContext在属性绑定中

1 个答案:

编辑：