通过在 Angular 中循环访问数组 2 秒来删除动态创建的元素

Question

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

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

从notifications.component.ts文件：

export class NotificationsComponent {
notifications: Notifications[] = this.notifSer.notifications;
constructor(private notifSer: NotificationsService) {}
}

通知.组件.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>

从notifications.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/动画包。

将浏览器动画模块导入到模块中。

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