angular - 使用angular2显示/隐藏密码文本

Question

我想根据用户点击显示/隐藏密码文本。但是我收到以下错误消息:

export class App {
    password = "secret";
    show = false;

    @ContentChild(ShowHideInput) input: ShowHideInput;

    constructor(){}

    toggleShow()
    {
        this.show = !this.show;
        console.log(this.input); //undefined
        if (this.show){
            this.input.changeType("text");
        }
        else {
            this.input.changeType("password");
        }
    }
}

我创建的以下 plunker 链接。

https://plnkr.co/edit/2GK79PuPtRQNmoUbF6xC?p=preview

Answer 1

这是一个更好的答案。检查以下内容:

输入

<input [type]="show ? 'text' : 'password'" />

点击 Action

<button (click)="password()">{{show ? 'Show' : 'Hide'}}</button>

组件

// variable - default false
show: boolean = false;

constructor() {
}

// click event function toggle
password() {
    this.show = !this.show;
}