角材料创建类似于引导警报的警报 [英] Angular material create alert similar to bootstrap alerts
本文介绍了角材料创建类似于引导警报的警报的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是棱角材料的新手.我试图实施警报以使用角度材料显示消息,这与引导警报类似,即.
I am new to angular material. i am trying to implement alert to display messages using angular material which is similar in bootstrap alert ie.
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
有人能帮我实现角材料的最佳方法是什么吗?
Can anyone help me what is the best way to implement in angular material?
非常感谢
推荐答案
角度材料没有内置的Alert组件,但是您可以非常容易地实现和自定义它,该实现包括一个组件以及一个模板和css文件的服务完成这些组成.
Angular materials Doesnot Have built-in Alert Component but you can implement one very easy and customize it ,This implementation includes one component and one service which template and css file complete these composition .
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { AlertService } from 'src/app/_services';
@Component({
selector: 'alert',
templateUrl: 'alert.component.html',
styleUrls: ['./alert.component.css']
})
export class AlertComponent implements OnInit, OnDestroy {
private subscription: Subscription;
message: any;
constructor(private alertService: AlertService) { }
ngOnInit() {
this.subscription = this.alertService.getMessage().subscribe(message => {
this.message = message;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
警报模板
<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div>
警报样式
.alert-danger {
background-color: #f44336; /* Red */
}
.alert-success {
background-color: #36f456;
}
.alert{
padding: 20px;
color: white;
margin-bottom: 15px;
text-align: center;
}
警报服务
import { Injectable } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Observable, Subject } from 'rxjs';
@Injectable()
export class AlertService {
private subject = new Subject<any>();
private keepAfterNavigationChange = false;
constructor(private router: Router) {
// clear alert message on route change
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
if (this.keepAfterNavigationChange) {
// only keep for a single location change
this.keepAfterNavigationChange = false;
} else {
// clear alert
this.subject.next();
}
}
});
}
success(message: string, keepAfterNavigationChange = false) {
this.keepAfterNavigationChange = keepAfterNavigationChange;
this.subject.next({ type: 'success', text: message });
}
error(message: string, keepAfterNavigationChange = false) {
this.keepAfterNavigationChange = keepAfterNavigationChange;
this.subject.next({ type: 'error', text: message });
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
典型用法
this.alertService.error("Error!! Something went wrong");
this.alertService.success("Success, You are done");
在登录失败时显示警报的用法示例
onSubmit(){
this.authService.login(this.user).subscribe(
(res: any) => {
if(!res.hasError && res.token){
this.authService.isLoggedIn = true;
localStorage.setItem('token', res.token);
this.router.navigate(['/']);
} else {
this.alertService.error(res.errorMessage);
}
},
err => {
this.alertService.error(err.errorMessage);
}
);
}
这篇关于角材料创建类似于引导警报的警报的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文