javascript - Angular 2 : How to fade out box-msg after a while which is displayed onClick

Question

可能是一个愚蠢的问题，但我是Angular的新手，并且仍在学习中。

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

<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 类，但没有成功。

单击按钮时，

hideSharedLinkCopyMessage 设置为 true。最初它设置为 false 如何在几秒钟后淡出此消息？

Answer 1

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

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

另一个更礼貌的选择是使用 Angular Materials 并导入 Snackbar成分。非常易于使用，您可以根据需要进行自定义。