イオン2 - 指示の中からコンポーネントに到達する方法？

Question

ディレクティブが適用されているコントロール（入力）がクリックされたときにカスタムnumpadを表示するディレクティブを作成しようとしています。 私はIonic 2 RC5で働いています。

<ion-content> 
    <ion-item> 
     <ion-label stacked>Label</ion-label> 
     <ion-input dirNumpad type="text" [(ngModel)]="myField"></ion-input> 
    </ion-item> 
</ion-content> 
<ion-footer> 
    <numpad #idNumpad hidden></numpad> 
</ion-footer> 

テンキー成分はページの下部に、DOMであるmyPage.html。

dirNumpad.ts

import { Directive, ElementRef, ViewChild } from '@angular/core'; 
import { Numpad } from '../../components/numpad/numpad'; 
@Directive({ 
    selector: '[dirNumpad]',   // Attribute selector 
    host: { 
     '(click)':   'onClick()' 
    } 
}) 
export class DirNumpad { 
    @ViewChild('idNumpad') numpad: Numpad; 
    constructor(private el: ElementRef) { 
    } 
    onClick() { 
     this.showNumpad(); 
    } 
    showNumpad() { 
     console.log(this.numpad); => undefined 
     this.numpad.show();  => error: show property does not exist on undefined 
    } 
} 

numpad.html

<div class="numpad" style="position:absolute; top:auto; left:0; right:0; bottom:0; height:150px;">My Numpad</div>

numpad.ts

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'numpad', 
    templateUrl: 'numpad.html' 
}) 
export class Numpad { 
    constructor() {} 
} 

私の問題：ViewChildを通じてディレクティブの内部から数値パッドコンポーネントに到達することはできません。 console.log（this.numpad）は常に "undefined"を返します！ ディレクティブが適用されている入力をユーザーがクリックした場合にのみ、数値パッドを表示する必要があります。

私は間違っていますか？ 私はこの問題に悩まされているので、どんな助けにも感謝します。

Answer 1

ViewChildは、アイテムの子アイテムにのみ適用されます。コンポーネントは指示のどのような方法でも子ではなく、兄弟であるため、ViewChildで受け取ることはできません。

あなたが入力

の一部としてそれを渡すことができますが、あなたのコンポーネント

import { Directive, ElementRef, Input } from '@angular/core'; 
import { Numpad } from '../../components/numpad/numpad'; 
@Directive({ 
    selector: '[dirNumpad]',   // Attribute selector 
    host: { 
     '(click)':   'onClick()' 
    } 
}) 
export class DirNumpad { 
    @Input('numpad') numpad: Numpad; 
    constructor(private el: ElementRef) { 
    } 
    onClick() { 
     this.showNumpad(); 
    } 
    showNumpad() { 
     console.log(this.numpad); => undefined 
     this.numpad.show();  => error: show property does not exist on undefined 
    } 
} 

で入力を宣言し、HTMLでそれを設定し

<ion-content> 
    <ion-item> 
     <ion-label stacked>Label</ion-label> 
     <ion-input dirNumpad [numpad]="idNumpad" type="text" [(ngModel)]="myField"></ion-input> 
    </ion-item> 
</ion-content> 
<ion-footer> 
    <numpad #idNumpad hidden></numpad> 
</ion-footer>