Angular 材质创建类似于引导警报的警报

2024-03-28

我是有角材料的新手。我正在尝试实现警报以使用角度材料显示消息,这与引导警报即类似。

<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>

谁能帮助我在角度材料中实施的最佳方法是什么?

非常感谢


Angular Materials 没有内置的 Alert 组件,但你可以很容易地实现一个并对其进行自定义,该实现包括一个组件和一个服务,模板和 CSS 文件完成这些组合。

警报组件

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);
        }
      );     
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 材质创建类似于引导警报的警报 的相关文章

随机推荐

  • ASP.NET 应用程序中的实体框架 ObjectContext 单元测试

    我使用以下代码为每个 ASP NET 请求创建实体框架 ObjectContext public static class ObjectContextPerRequest public static EStudyTestDatabaseEn
  • 如何使用 MVVM 模式“禁用”WPF 中的按钮?

    我正在尝试掌握 WPF 和 MVVM 并取得了良好的进展 WPF 和 MVVM 方面进展顺利 然而 XAML 和数据绑定方面则完全是另一回事了 我将如何 禁用 按钮 例如 我的视图模型中有一个 CanClose 属性 用于确定当前是否可以关
  • SwiftUI:无法将“Bool”类型的值转换为预期的参数类型“Binding

    为 SwiftUI 创建基于文本的游戏 想知道为什么我无法在字符 ForEach 循环中访问 isSelected 它给出了错误 无法将类型 Bool 的值转换为预期参数类型 Binding 在线上Toggle isOn character
  • 为什么 const_cast 会删除指针的常量性,但不会删除指向 const 的指针?

    我明白那个const cast使用指针和引用 我假设输入const cast应该是一个指针或引用 我想知道为什么如果输入是指针 引用 它不会消除常量性const int 以下代码按预期工作 const cast具有多级指针 int main
  • 如何删除自动完成上的清除按钮并仅显示文本

    我是反应虚拟化和自动完成的新手 我目前已经构建了一个列表 当选中该复选框时 该列表会显示多个文本 这是我的代码 https codesandbox io s material demo forked 1qzd3 file demo tsx
  • Django:限制模型数据

    我正在以一种限制可以通过模型获得的查询集的方式进行搜索 假设我有以下模型 具有依赖项 Company Section Employee Task more models Customer Contract Accounts other gr
  • 使用 dict.values() 或 dict.itervalues() 迭代时修改字典值

    我有一个像这样初始化的字典 tab Mike 0 Chad 15 Taylor 2 我希望能够将整数添加到字典中的每个值 例如 添加 5 后 字典应如下所示 Mike 5 Chad 20 Taylor 7 似乎这可以通过几行代码来完成 但我
  • mvc视图中模型空引用异常

    问题是从控制器传递数据到视图时出现空引用异常 我将模型从控制器传递到视图 如下所示 ViewBag PartId id var viewmodel new Orderviewmodelnew var order new OrderMnage
  • 扩展 APDU 和 T=0/1 通信协议

    我有一个 JCOP V2 4 2 R3 java 卡 它的数据表中提到 该卡支持T 1 and T 0通信协议 我还有一个 ACR38 智能卡读卡器 它支持 T 0 和 T 1 协议 我与一张卡成功进行了 T 0 通信 并且与该卡成功进行了
  • C# 中的 StreamReader 和缓冲区

    我对 StreamReader 的缓冲区使用有疑问 这里 http msdn microsoft com en us library system io streamreader aspx http msdn microsoft com e
  • 如何让 Polymer 2.0 ES5 元素与 v1 规范一起工作?

    我已经成功构建了许多 Polymer 2 0 元素 它们在支持 ES6 的浏览器中运行良好 当我尝试将它们转换为 ES5 时 浏览器会抛出一堆错误 如下所示 Failed to construct HTMLElement Please us
  • 哪些 Web 浏览器支持通过 HTML5 进行地理定位?

    哪些网络浏览器 和版本 支持通过 HTML5 进行地理定位 在桌面上仅支持 Firefox 不确定 Opera 是否已将其包含在官方版本中 在移动设备上 mobile safari 3 和 android 2 x 浏览器 有关支持的更多信息
  • 使用 python 以字节块的形式读取文件

    我正在尝试将包含超过 10 亿字节的文件转换为整数 显然 我的机器无法立即执行此操作 因此我需要对代码进行分块 我能够解码前 50 000 000 个字节 但我想知道如何读取文件中介于 50 000 001 和 100 000 000 15
  • 如何获取SQL组查询的第一行?

    我在编写查询时遇到问题 我想选择分组的每组行的第一行 我的桌子是Transactions userID Date StoreID 1 8 9 2013 10 1 9 9 2013 10 1 10 9 2013 20 2 7 9 2013 3
  • 使用 pyvips 连接多个巨大图像

    我试图弄清楚如何通过 python 将多个图像与 vip 结合起来 我在一个文件夹中有 30 个 但可以超过 600 个 条纹 png 文件 它们的分辨率为 854x289920 所有分辨率都相同 如果我尝试使用 MemmoryError
  • Apache POI autoSizeColumn() 无法正常工作[重复]

    这个问题在这里已经有答案了 我正在创建一个程序 使用 apache poi 将信息写入 Excel 文件 将所有数据输入文件后 我对文件的每一列调用 autoSizeColumn 方法 但它会将列的大小调整为最后输入的单元格的宽度 该宽度有
  • LNK1106 具有大量二进制资源

    我的项目中有一个相当大的 dat 文件 896MB 作为 BIN 资源 现在我收到 LNK1106 链接错误 致命错误 LNK1106 无效文件或磁盘已满 无法查找 0x382A3920 我在 Windows XP 下使用 Visual S
  • 用于非图像矩阵的 Keras CNN

    我最近开始学习深度学习和强化学习 我试图弄清楚如何使用 Keras 为 10 行 3 列的 0 和 1 矩阵编写卷积神经网络 例如 输入矩阵看起来像这样 1 0 0 0 1 0 0 0 0 输出应该是另一个由 0 和 1 组成的矩阵 与前面
  • React Native 导航 v5 选项卡按下不起作用

    从代码中可以看出 tabPress 没有被调用 是我做错了还是我遗漏了一些东西 不幸的是我没有找到任何 React 导航版本 5 的代码示例
  • Angular 材质创建类似于引导警报的警报

    我是有角材料的新手 我正在尝试实现警报以使用角度材料显示消息 这与引导警报即类似 div class alert alert success strong Well done strong You successfully read thi