角材料创建类似于引导警报的警报

本文介绍了角材料创建类似于引导警报的警报的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是棱角材料的新手.我试图实施警报以使用角度材料显示消息，这与引导警报类似，即.

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: 'alertponent.html', styleUrls: ['./alertponent.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); } ); }