更改输入类型="；电话:；使用Angular 2/Ionic 2创建密码字段

我想使用Angular 2/Ionic 2将输入类型

tel

更改为

password

字段

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

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

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

---

这似乎是

ViewChild

的完美用法。它可以用于从组件中的DOM获取对HTML元素的引用，以便您可以对其进行修改。首先，您需要将模板变量添加到输入元素，该元素将用于获取对它的引用：

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

然后创建一个函数，该函数将使用

myInput

变量（它现在引用了input）将其类型更改为

password

，并在某处调用它：

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

---

以下是。

这似乎是

ViewChild

的完美用法。它可以用于从组件中的DOM获取对HTML元素的引用，以便您可以对其进行修改。首先，您需要将模板变量添加到输入元素，该元素将用于获取对它的引用：

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

然后创建一个函数，该函数将使用

myInput

变量（它现在引用了input）将其类型更改为

password

，并在某处调用它：

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

---

以下是。

您不应该直接使用本机元素。您应该使用渲染器服务。你可以在这里阅读why@PatrickJane如果我理解正确，那么在开发浏览器应用程序时直接使用

nativeElement

是完全可以的<代码>这种方法的问题是，当我们直接访问本机元素时，我们放弃了Angular的DOM抽象，错过了在非DOM环境中执行的机会，例如：本机移动、本机桌面、web worker或服务器端渲染。记住Angular是一个平台，而浏览器只是我们渲染应用程序的一个选项。您不应该直接使用本机元素。您应该使用渲染器服务。你可以在这里阅读why@PatrickJane如果我理解正确，那么在开发浏览器应用程序时直接使用

nativeElement

是完全可以的<代码>这种方法的问题是，当我们直接访问本机元素时，我们放弃了Angular的DOM抽象，错过了在非DOM环境中执行的机会，例如：本机移动、本机桌面、web worker或服务器端渲染。记住Angular是一个平台，而浏览器只是我们渲染应用程序的一个选项。