通過在 Angular 中 2 秒后循環遍歷數組來刪除動態創建的元素

Question

我正在開發 Angular 8 應用程序中的通知組件，我需要在通知出現 2 秒后隱藏通知。

我將通知存儲在一個數組中，並進行循環以在 html 中顯示其項目，如下所示：

來自notification.component.ts文件：

export class NotificationsComponent {

  notifications: Notifications[] = this.notifSer.notifications;

  constructor(private notifSer: NotificationsService) {}

}

Notifications.component.html文件：

<ul class="notifications-container">
  <li *ngFor="let notif of notifications" [class]="notif.class">
    {{ notif.msg }}
    <i class="fa fa-times" aria-hidden="true"></i>
  </li>
</ul>

來自test.component.ts文件：

export class HomeComponent implements {

  constructor(private notifSer: NotificationsService) {}

  // set Values to Notifications to Show Messages
  setNotif(notificationsValue: Notifications) {
    this.notifSer.setNotif(notificationsValue);
  }
}

來自test.component.html文件：

<button (click)="setNotif({class: 'success', msg: 'hey there!'})">
  show notification
</button>

來自notification.service.ts文件：

export class NotificationsService {

  notifications: Notifications[] = []; // store notifications here

  setNotif(notification: Notifications): void {
    this.notifications.push(notification);
  }

}

我要問的是如何在通知出現 2 秒后自動刪除它們。
我在（ notifications.service ）文件中制作了這個解決方案，但它立即消失了，我想將其淡出：

setNotif(notification: Notifications): void {
    this.notifications.push(notification);
    // Remove the notification from the notifications array after 2 seconds
    setTimeout(() => {
      this.notifications.shift();
    }, 2000);
  }

提前致謝。

Answer 1

這是一個簡單的 StackBlitz，它顯示了淡入淡出的動畫消息

https://stackblitz.com/edit/angular-vkjyzg

您需要安裝@angular/animations package。

將 BrowserAnimationsModule 導入到您的模塊中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, BrowserAnimationsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

然后定義您希望在組件中使用的動畫

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    // the fade-in/fade-out animation.
    trigger('simpleFadeAnimation', [

      // the "in" style determines the "resting" state of the element when it is visible.
      state('in', style({opacity: 1})),

      // fade in when created. this could also be written as transition('void => *')
      transition(':enter', [
        style({opacity: 0}),
        animate(600 )
      ]),

      // fade out when destroyed. this could also be written as transition('void => *')
      transition(':leave',
        animate(600, style({opacity: 0})))
    ])
  ]
})
export class AppComponent  {
  messages = [];

  num = 1;

  add() {
    const message = 'New message ' + this.num++;
    this.messages = [...this.messages, message];
    setTimeout(() => { this.messages = this.messages.filter(m => m !== message); }, 2000);
  }
}

在模板中添加元素時它會淡入然后在 2 秒后淡出

<button (click)="add()">Add</button>

<div *ngFor="let message of messages" [@simpleFadeAnimation]="'in'">{{message}}</div>

這是我基於https 的文章：//www.kdechant.com/blog/angular-animations-fade-in-and-fade-out