角度 - 子コンポーネントが親のテンプレート変数を参照できますか？

Question

私はprimefaces primengコンポーネント、p-contextmenuを使って、角度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は動作していないことを示していますが、エラーメッセージは表示されません。あなたのapp.tsで

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

    getContextMenu() { 
    return this.contextMenu; 
    } 

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

、あなたがサービスを注入し、値を設定します。appendToため

Answer 1

ありがとう：

https://plnkr.co/edit/kwnkSKDPFs1Bp2xOHqIu

child.ts：

import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {ContextMenuHolderService} from './context-menu-holder.service' 

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <div> 
     <h2>Hello child</h2> 
     <span #mySpan>this bit has a context menu</span> <br> 
     <span #parentSpan>this bit is the target for the parent span.</span> 

     <p-contextMenu [target]="mySpan" [appendTo]="parentContext" [model]="items"></p-contextMenu> 
     <p-contextMenu [target]="parentSpan" [appendTo]="parentContext" [model]="itemsForParent"></p-contextMenu> 
    </div> 
    `, 
}) 

export class ChildComponent { 
    private items: MenuItem[]; 
    parentContext: any; 

    constructor(private cmhs : ContextMenuHolderService) { 

    } 

    ngOnInit() { 
     this.items = [{ label: 'mySpans context menu' }]; 
     this.itemsForParent = [{ label: 'parent context menu items' }]; 
     console.log('child init', this.cmhs.getContextMenuParent()) 
     this.parentContext = this.cmhs.getContextMenuParent().nativeElement; 
    } 
} 

ここで、子コンポーネントは、アイテム、それをコンテキストメニューを構築していますメニューに欲しい。このメニューは親に存在する必要があります（スタイルや配置の理由から必要な場合があります）。子供には、onInitライフサイクルの段階で設定されるparentContextオブジェクトがあります。

親（app.ts）：

//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段階だ時に親がサービス内のオブジェクトを設定します。当初はこれが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; 
    } 
} 

Answer 2

ドキュメントはたぶん、サービスが問題を解決することができます

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

言います。 component.tsでは、サービスを注入して値を取得します。

私はそれをテストしていませんでしたが、はになるはずです。 contextMenuが変更できる場合は、イベントリスナーまたはobservableを使用する必要があります。私は解決策を見つけることができましたルドビクギヨームへ