1

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

我的页面.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>

Numpad 组件位于页面底部的 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
  }
}

小键盘.html

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

小键盘.ts

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

我的问题：我无法通过 ViewChild 从指令内部访问小键盘组件。console.log(this.numpad) 总是返回“未定义”！仅当用户单击应用指令的输入时，我才需要它来显示小键盘...

我究竟做错了什么？我被这个问题困住了，所以任何帮助都将不胜感激。

4

1 回答 1

2

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>
于 2017-01-21T11:45:09.263 回答