在Angular中,在登录失败后显示闪存消息可以使用Angular的内置服务Toastr或者自定义的消息组件来实现。下面是两种解决方法的示例代码:
Toastr服务:
在登录组件的代码中,导入ToastrService服务,并在登录失败的地方调用error方法来显示闪存消息。import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(private toastr: ToastrService) {}
login() {
// 登录失败的逻辑
this.toastr.error('登录失败,请检查用户名和密码');
}
}
FlashMessageComponent的组件,用于显示闪存消息。该组件可以通过一个输入属性来接收消息内容,并在一定时间后隐藏消息。flash-message.component.html:
flash-message.component.ts:
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-flash-message',
templateUrl: './flash-message.component.html',
styleUrls: ['./flash-message.component.css']
})
export class FlashMessageComponent implements OnInit {
@Input() message: string;
ngOnInit() {
setTimeout(() => {
this.message = null; // 隐藏消息
}, 3000); // 3秒后隐藏消息
}
}
在登录组件中,使用FlashMessageComponent来显示闪存消息。在登录失败的地方,将消息内容传递给FlashMessageComponent的输入属性。
login.component.html:
login.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
errorMessage: string;
login() {
// 登录失败的逻辑
this.errorMessage = '登录失败,请检查用户名和密码';
}
}
这两种方法都可以在登录失败后显示闪存消息,具体选择哪种方法取决于个人的需求和偏好。
上一篇:Angular在导航时重载组件