在 ionic 2 中单击时隐藏和显示 [英] Hide and show on click in the ionic 2

问题描述

我想通过单击按钮来隐藏和显示输入字段.谁能告诉我怎么做.

I Want to hide and show the input field by clicking a button. can anyone please tell me how to do.

我的代码如下:

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

需要隐藏

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

提前致谢

推荐答案

你可以在你的代码后面使用一个变量和一个 *ngIf

You could use a variable in your code behind and an *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;
    }
}

这是一个 plunker 示例 https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Here's a plunker example https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望有帮助

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

-- Edit - Updated Plunk with animated example

动画按钮点击是可以完成的，但它们略有不同，你必须使用 Angular 的内置动画，它放在组件本身中.它还需要在组件中进行额外的导入才能使用它.

Animated button clicks are can be done but they are slightly different, you have to use angular's built-in animation which is put within the component itself. It also requires additional imports within the component to use it.

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

Within the Component set up, you put an animation tag along with you selector, template etc and you can apply the style changes to that based on the string.

   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 中的某些内容，并带有如下标记.

This is then applied to something within the components HTML with a tag like follows.

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

这里又是一个 plunker 示例 https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Here's the plunker example again https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望对您有所帮助

这篇关于在 ionic 2 中单击时隐藏和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！