使用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";
}

這是工作的Plunker 。