首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular material 2 SnackBar不工作

Angular Material 2是一个开源的UI组件库,用于构建现代化的Web应用程序。它提供了一套丰富的可重用UI组件,其中包括SnackBar组件。

SnackBar是一种轻量级的通知组件,用于向用户显示简短的消息或操作结果。它通常以浮动的方式显示在屏幕的底部,并在一段时间后自动消失。

然而,如果在使用Angular Material 2的SnackBar组件时遇到不工作的问题,可能有以下几个原因和解决方法:

  1. 版本兼容性问题:确保你使用的Angular Material 2版本与你的Angular版本兼容。可以查看官方文档或GitHub页面来获取版本兼容性信息。
  2. 引入和配置问题:确保你已正确引入和配置了Angular Material 2的SnackBar模块。在你的模块文件中,需要导入MatSnackBarModule并将其添加到imports数组中。
  3. 使用方式错误:确保你正确使用了SnackBar组件。你可以通过在组件中注入MatSnackBar服务,并使用它的open方法来显示SnackBar。例如:
代码语言:txt
复制
import { MatSnackBar } from '@angular/material/snack-bar';

constructor(private snackBar: MatSnackBar) {}

openSnackBar(message: string, action: string) {
  this.snackBar.open(message, action, {
    duration: 2000, // 持续时间(毫秒)
  });
}
  1. 样式问题:检查你的应用程序的样式文件是否正确加载,并且没有覆盖SnackBar组件的样式。确保你的样式文件中没有对SnackBar组件的自定义样式或覆盖。

如果以上解决方法都无效,建议查阅Angular Material 2的官方文档或社区论坛,寻求更详细的帮助和支持。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Material Design —Snackbars &Toasts

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚...Snackbars & Toasts Material Design链接:Snackbars&Toasts ?...消失方式:1、向下滑动;2、一段时间后自动消失;3、用户在别处进行新交互时(例如打开了新的页面) 非常短的文本字符串 Snackbars应包含与所执行的操作直接相关的单行文本。 它们可能包含操作文本。...这是为了确保用户能够在预期时间内阅读Snackbar。 最多0-1个操作,包含取消按钮 如果存在行为,则遵守Dialog的空间和可视性规则。...当显示第一个Snackbar时第二个就该做准备,在第二个Snackbar开始出现前第一个Snackbar应该开始向下收缩。 (今天的好短~开心~)

1K60

Blazor学习之旅(9)用MudBlazor重构Todo

Todo V2规划 我们首先来做一个规划,期望效果是: (1)能够有一个分页列表,能够将MongoDB中的数据读取出来并展示; (2)能够针对Todo Name进行筛选查询; (3)能够有一个弹出框进行新增...根据Todo Item Name进行搜索 (3)新增TodoItem (4)修改TodoItem (5)删除TodoItem Todo V2重构 (1)准备工作 在NavMenu.razor中新增一个导航菜单...> (2)重构Todo列表页 在Pages目录下新增一个razor组件:TodoV2.razor,代码如下: @page "/todov2...{ [Inject] public ISnackbar Snackbar { get; set; } [Inject] public...MudDialog.Close(DialogResult.Ok(true)); void Cancel() => MudDialog.Cancel(); } 由于该页面代码很简单,我们就直接将其放在同一个razor中,区分前后端的部分类

28540

Angular Material 的设计之美

我可以说一下自己的感受,Angular Material 的交互更加流畅,细节做的更好。 Angular Material 组件库虽然很优秀,但是却被戴上了只适合做 C 端界面的帽子。...接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点,并且简单介绍 Angular Material 的一些使用技巧。...顺便插一句,如果大家纠结用 Sass 还是 Less,可以看一下这篇文章 CSS 预处理器中的循环,个人建议用 Less,请原谅我无意引战?。...我最开始认为将所有样式全部写到 mixin 中并不是很优雅的做法,但是在编写 ng-matero 暗黑主题的时候,我发现这样做是不行的。以下是 Angular Material 主题定制的方法。...总结 文章篇幅有限,以我浅薄的资历还无法将 Angular Material 的设计之美剖析的面面俱到,但是如果大家通过这篇文章能够更好的了解 Angular Material 或者对 Angular

5K30

Material Design 实战 之第三弹—— 悬浮按钮和可交互提示

立面设计是Material Design中一条非常重要的设计思想,也就是说,按照Material Design的理念,应用程序的界面不仅仅只是一个平面,而应该是有立体效果的。...的点击事件: 1.2.1 实例化 1.2.2 实例化的 FloatingActionButton对象调用setOnClickListener方法注册监听,类似Button 2....Snackbar 2.1 调用了Snackbar的make()方法来创建一个Snackbar对象 (注意三个参数含义:view,"text", Snackbar.LENGTH_SHORT...可以看到,这里调用了Snackbar的make()方法来创建一个Snackbar对象, make()方法的 第一个参数需要传人一个View,只要是当前界面布局的任意一个View都可以,Snackbar...第二个参数就是Snackbar中显示的内容, 第三个参数是Snackbar显示的时长。 这些和Toast都是类似的。

1.7K30

Android Design Support Library初探-更新中

官方的详细专题有更详细的说明来介绍使用material design带来的好处。但我们也知道,这种设计对于开发者来讲,尤其是在意向后兼容的开发者来说是一种挑战。...在Android Design Support Library的帮助下,我们为所有的开发者,所有的2.1以上的设备,带来了一些重要的material design控件。...比如: navigation drawer view, floating labels for editing text, a floating action button, snackbar, tabs...navigation drawer view, floating labels for editing text(输入控件的悬浮标签) floating action button (悬浮操作按钮) snackbar...加入依赖 本工程的build.gradle中 compile 'com.android.support:design:23.1.1' ---- 悬浮操作按钮 Floating Action Button Snackbar

94920

Android提醒微技巧,你真的了解Dialog、Toast和Snackbar吗?

现在这个Dialog是Material Design风格的,因为我是在6.0系统上运行的,因此会自动赋予这样的风格。但是如果在老版本系统上运行,比如说2.3系统,会是什么样的效果呢?...人的审美总是在进步的,我们有没有什么办法在老版本的系统中也使用Material Design风格的Dialog呢?...2. Toast 说到不会阻挡用户原本正在进行的操作,这就延伸到我们今天的第二个主题,Toast。Toast只会弹出一段信息,告诉用户某某事情已经发生了,过一段时间后就会自动消失。...Snackbar 如果说Dialog和Toast是两个极端的话,那么Snackbar就是处于中间的位置了。Snackbar和Toast比较相似,但是用途更加广泛,并且它是可以和用户进行交互的。...Snackbar:以上两者之外的任何其他场景,Snackbar可能会是你最好的选择。

1.2K80

Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

我们已对所有三个仓库中的所有问题完成了分类,并会持续对新报告的问题做类似工作。 我们的承诺是:未来,所有新报告的问题都将在 2 周内完成分类。...社区的支持工作做计划。...它们提供了健壮易读的 API 表面,可以帮助大家更好地测试 Angular Material 组件。...有关这些 API 和其他新特性的更多细节和示例,请务必查看 Angular Material Test Harnesses 的文档: http://material.angular.io/cdk/test-harnesses...将来,webpack v5 会带来: 持久磁盘缓存,以加快构建速度 cjs 摇树,减小包体积 这一支持是实验性的,并且正在开发中,因此我们建议你将其用于生产用途。 想试用 webpack5 吗?

3.3K30

Ng-Matero V10 正式发布!

Angular v10 在六月下旬就悄无声息的发布了,虽然 v9 的发布延期了两个月,但是 v10 并没有受影响,仍然如期而至。...再来说一下 Angular Material, v10 有一个非常大的变化,就是增加了 datepicker 的区间选择功能,不用多说,这是一个极其实用的功能。...其实 v10 版本除了将 AngularAngular Material 升级之外,主要是调整了 schematics ng add 的兼容问题,其它代码和 v9 最新版是一样的。...前期的工作主要是完善 v9 的版本。 本文主要说一下 Ng-Matero 以及 Material Extensions 几个关键的优化点。...在线示例:https://ng-matero.github.io/ng-matero/#/forms/dynamic 主题化 主题化的内容可以说很多,暂时展开讲,简单说一下 Material Extensions

1.4K10
领券