在离子2中单击时隐藏和显示

Question

我想通过单击按钮隐藏和显示输入字段.任何人都可以告诉我该怎么做.

我的代码如下:

<button ion-button full round >Click </button>

需要隐藏

<ion-input type="text" value=""></ion-input>

提前致谢

Answer 1

您可以在代码后面使用变量和 *ngIf

your.component.html

<button ion-button full round (click)="onButtonClick()">Click</button>

<ion-input *ngIf="buttonClicked" type="text" value=""></ion-input>

your.component.ts

export class YourComponent {

    public buttonClicked: boolean = false; //Whatever you want to initialise it as

    public onButtonClick() {

        this.buttonClicked = !this.buttonClicked;
    }
}

这是一个有趣的例子https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望有所帮助

- 编辑 - 使用动画示例更新了Plunk

动画按钮点击可以完成,但它们略有不同,你必须使用角度的内置动画,它放在组件本身.它还需要组件内的其他导入才能使用它.

在组件设置中,您将动画标签与选择器,模板等一起放置,您可以根据字符串将样式更改应用于该标签.

   animations: [
        trigger("showHello", [
            state("true", style({
                "opacity": 1
            })),
            state("false", style({
                "opacity": 0
            })),
            transition("1 => 0", animate("350ms ease-in")),
            transition("0 => 1", animate("350ms ease-out"))
        ])
    ]

然后将其应用于组件HTML中的某些内容,其中包含以下标记.

<div [@showHello]="buttonClicked">
    animated hello
</div>

这里是一个更好的例子https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望能帮到更多