Question

我正在使用primefaces primeng组件@echo off setlocal EnableDelayedExpression for /f %%i in ('dir /b') do ( set fn=%%i :: Need to compare first 8 chars to ##.##.## if %fn:~0,8%==??.??.?? echo FollowsFormat )处理角度4应用程序。我试图告诉子元素使用父组件的模板变量。

app.html：

p-contextmenu

mycomponent.html：

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

显然它失败了，因为<p-contextMenu [appendTo]="contextMenuHolder" [model]="items"></p-contextMenu>在孩子中不存在，但在其父母中存在：

Angular：标识符＆context 39.MenuHolder＆＃39;没有定义。组件声明，模板变量声明和元素引用不包含此类成员

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

编辑：

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

Answer 1

appendTo的文档说

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

也许服务可以解决问题：

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

  getContextMenu() {
    return this.contextMenu;
  }

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

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

我没有测试过，但应该工作。如果contextMenu可以更改，则必须使用事件侦听器或observable。

Answer 2

感谢Ludovic Guillaume，我找到了解决方案：

https://plnkr.co/edit/kwnkSKDPFs1Bp2xOHqIu

child.ts：

onInit

这里，子组件已经在菜单中构建了包含所需项目的上下文菜单。此菜单需要驻留在父级中（有时这对于样式或定位原因而言是必需的）。孩子有一个//our root app component import {Component, NgModule, VERSION, ViewChild} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import {ChildComponent} from './child' import {ContextMenuModule,MenuItem} from 'primeng/primeng' import {ContextMenuHolderService} from './context-menu-holder.service' @Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <div #parentContextTarget>This is in the parent component and should have a context menu</div> <div #parentContextWrapper></div> <child-comp></child-comp> </div> `, }) export class App { name:string; @ViewChild('parentContextWrapper') parentContextWrapper; constructor(private cmhs : ContextMenuHolderService) { this.name = `Angular! v${VERSION.full}` // console.log('parent constructor') } ngOnInit(){ console.log('parent init - parent context wrapper', this.parentContextWrapper) this.cmhs.setContextMenuParent(this.parentContextWrapper) } }对象，将在生命周期的onInit阶段设置。

父（app.ts）：

afterViewInit

父级在import {Injectable} from '@angular/core'; @Injectable() export class ContextMenuHolderService { contextMenuParent: any; // TODO set a type (HTMLElement?) getContextMenuParent() { console.log('returning cmp', this.contextMenuParent) return this.contextMenuParent; } setContextMenuParent(contextMenuParent: any) { console.log('settin context menu parent', contextMenuParent) this.contextMenuParent = contextMenuParent; } }阶段设置对象。最初我认为这必须在function Move() { var sss=SpreadsheetApp.getActiveSpreadsheet(); var ss=sss.getSheetByName('Sheet1'); var srcrange=ss.getRange('B3:B11'); var day=ss.getRange('C3').getValue();// day from date(C1) var desrange=ss.getRange(3,day,10,1); srcrange.copyTo(desRange); }期间，但最终在生命周期中为时已晚。

服务：

<table>

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

2 个答案: