[英]Remove a dynamically created element by looping through an array after 2 seconds in Angular
我正在开发 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);
}
提前致谢。
这是一个简单的 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.