Ionic 2 - 如何从指令内部访问组件？

Question

我正在尝试构建一个指令以在以下情况下显示自定义小键盘单击应用指令的控件（输入）。我正在研究 Ionic 2 RC5。

myPage.html

<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。

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)总是returns"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>

Ionic 2 - 如何从指令内部访问组件？

Ionic 2 - How to reach a component from inside a directive?

components

ionic2

directive

viewchild