이온 2 - 지침에서 구성 요소에 어떻게 도달합니까?

Question

지시문을 적용한 컨트롤 (입력)을 클릭하면 사용자 지정 numpad를 표시하도록 지시문을 작성하려고합니다. 나는 이오니아 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> 

숫자 패드 성분 페이지의 하단에서의 mypage.html DOM이다.

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>