javascript - 通过在 Angular 中 2 秒后遍历数组来删除动态创建的元素

Question

我正在 Angular 8 应用程序中开发一个通知组件，我需要在通知出现 2 秒后隐藏它们。

我将通知存储在一个数组中，并制作一个循环以在 html 中显示其项目，如下所示:

from notifications.component.ts file:

export class NotificationsComponent {

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

  constructor(private notifSer: NotificationsService) {}

}

notifications.component.html file:

<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>

from test.component.ts file:

export class HomeComponent implements {

  constructor(private notifSer: NotificationsService) {}

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

from test.component.html file:

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

from notifications.service.ts file:

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 包。

将 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 发表的文章