Angular2:如何显示onClick一段时间后淡出box-msg [英] Angular2: How to fade out box-msg after a while which is displayed onClick

问题描述

可能是一个愚蠢的问题，但对 angular 还是陌生的，并且仍然可以学习.

Might be a silly question but am new to angular and still learning.

在单击按钮时显示成功消息，几秒钟后我需要淡出.

Am showing a success message on button click which I need to fade out after few seconds.

<div *ngIf="hideSharedLinkCopyMessage" class="alert alert-success box-msg " role="alert">
    <strong>Link Generated!</strong> Your sharable link is copied to clipboard.
</div>

现在，我正在使用 alert-success 和 box-msg 类.我也尝试添加 fadeOut 类，但这没有用.

Now, am using alert-success and box-msg classes. I tried to add fadeOut class as well but that didn't worked.

hideSharedLinkCopyMessage 设置为 true .最初将其设置为 false 几秒钟后如何淡出此消息?

hideSharedLinkCopyMessage is set to true when the button in clicked. Initially it is set to false How can I fade this message out after few seconds?

推荐答案

设置 true hideSharedLinkCopyMessage 后，添加超时功能.在下一个示例中，链接将在2秒后消失；

Add a timeout function after setting true hideSharedLinkCopyMessage. In the next example the link will fade out after 2 seconds;

FadeOutLink() {
    setTimeout( () => {
          this.hideSharedLinkCopyMessage = false;
        }, 2000);
   }

另一种选择是使用Angular Materials并导入小吃栏组件.真的很容易使用，您可以根据需要自定义它.

An other option and politer is to use Angular Materials and import the Snackbar component. Is really easy to use and you can customize it as you want.

这篇关于Angular2:如何显示onClick一段时间后淡出box-msg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！