Angular2：如何在显示onClick后淡出box-msg

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 classes。我也尝试添加 fadeOut class 但是没有用。

单击按钮时，

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

Answer 1

普通淡出不适用于 *ngif，因为在 *ngif 中，元素直接从 DOM.

中移除

你需要用ngClass到add/remove一个class(fadeout)会有fade out的效果然后用timeout来转您的变量 hideSharedLinkCopyMessage 为真，元素将从 DOM.

中删除

控制器：

<your method to remove alert> () {
    // add class fadeOut here
    setTimeout( () => {
      this.hideSharedLinkCopyMessage = false;
    }, 3000);      
}

Answer 2

设置truehideSharedLinkCopyMessage后增加超时功能。在下一个示例中，link 将在 2 秒后淡出；

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

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

Answer 3

在 angular7 中，成功消息将在 4 秒后消失

  export class UnsubscribeComponent implements OnInit {
  hideSuccessMessage = false;

  FadeOutSuccessMsg() {
    setTimeout( () => {
           this.hideSuccessMessage = true;
        }, 4000);
   }

   component.html -
   ------------------
          <div  *ngIf="!hideSuccessMessage">
            <div class="col-12">
              <p class="alert alert-success">
                  <strong [ngClass] ="FadeOutSuccessMsg()" >You are successfully 
                  unsubscribe from this email service.</strong>                 
              </p>
            </div>
          </div>

Angular2：如何在显示onClick后淡出box-msg

Angular2: How to fade out box-msg after a while which is displayed onClick

javascript

fadeout

angular