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

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

应用程序.html：

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

我的组件.html：

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

显然它失败了contextMenuHolder不存在于子级中，而是存在于其父级中：

角度：标识符“contextMenuHolder”未定义。组件声明、模板变量声明和元素引用不包含此类成员

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

Edit:

坏了的笨蛋 https://plnkr.co/edit/R5ePgaPymE9N3FnmsKP6。这个 plunkr 显示它不起作用，但没有错误消息。

的文档appendTo says

附加覆盖层的目标元素，有效值为“body”或另一个元素的本地 ng-template 变量。

也许服务可以解决这个问题：

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

  getContextMenu() {
    return this.contextMenu;
  }

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

In your app.ts，您注入服务并设置值。 在你的component.ts，您注入服务并获得价值。

我没有测试过但它should工作。如果contextMenu可以改变，你将不得不使用事件监听器或可观察的。