javascript - Angular2:如何在onClick显示一段时间后淡出box-msg

可能是一个愚蠢的问题，但对于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几秒钟后如何淡出此消息？

最佳答案

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

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

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