使用 Angular 2/Ionic 2 将输入类型 =“tel”更改为密码字段

Question

我想使用 Angular 2/Ionic 2 将输入类型 tel 更改为 password 字段。

我有一个将数字作为输入的密码字段，我想在按键事件触发后将数字更改为密码字段。

我尝试了以下方式，但键盘在输入第一个数字后关闭。

import { Component, Directive, HostListener } from '@angular/core';

  @Directive({
      selector: '.inputmask'
    })    
    export class MyDirective {
       @HostListener('document:keyup', ['$event.target'])
        onFocus(target) {
          target.type = 'password';
        }
        /*@HostListener('focusout', ['$event.target'])
        onFocusout(target) {
          target.type = 'tel';
        }*/
    }

还有我的模板：

<ion-input type="tel" [formControl]="aadhaarno" class="inputmask">

Answer 1

这似乎是ViewChild 的完美用途。它可用于从组件中的 DOM 获取对 HTML 元素的引用，以便您可以更改它。首先，您需要将模板变量添加到输入元素，用于获取对它的引用：

<ion-input #myInput type="tel" [formControl]="aadhaarno" class="inputmask">

然后在您的组件中，您必须导入 ViewChild 并使用它来获取对 DOM 中输入元素的引用：

import { ViewChild } from '@angular/core';

@ViewChild('myInput')
myInput: any;

然后您创建一个函数，该函数将使用myInput 变量（它现在具有对输入的引用）将其类型更改为password 并在某处调用它：

changeInput() {
this.myInput.nativeElement.type = "password";
}

这里是working Plunker。