Angular - 子组件可以引用父组件的模板变量吗？

Question

我正在使用 primefaces primeng 组件 p-contextmenu 开发 Angular 4 应用程序。我试图告诉子元素使用父组件的模板变量。

app.html:

<div>
  <router-outlet></router-outlet>
  <div #contextMenuHolder></div>
</div>

mycomponent.html:

<p-contextMenu [appendTo]="contextMenuHolder" [model]="items"></p-contextMenu>

显然它会失败，因为 contextMenuHolder 不存在于子级中，而是存在于其父级中:

Angular: Identifier 'contextMenuHolder' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

您可以从子组件引用父组件的模板变量吗？

编辑:

Plunkr with it broken 。这个 plunkr 显示它不起作用，但没有错误消息。

Answer 1

appendTo 的文档说

Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.

也许服务可以解决该问题:

@Injectable()
export class ContextMenuHolder {
  contextMenu: any; // TODO set a type (HTMLElement?)

  getContextMenu() {
    return this.contextMenu;
  }

  setContextMenu(contextMenu: any) {
    this.contextMenu = contextMenu;
  }
}

在您的 app.ts 中，您注入(inject)服务并设置值。 在您的 component.ts 中，您注入(inject)服务并获取值。

我没有测试它，但它应该可以工作。如果 contextMenu 可以更改，您将必须使用事件监听器或可观察的。