Angular 2+(8)的Material Snack Bar显示但未消失。
创始人
2024-10-15 16:01:15
0

在Angular 2+(8)中,可以使用Angular Material中的SnackBar组件来显示消息。以下是一个示例解决方法,演示如何在SnackBar显示后将其隐藏:

首先,确保已安装@angular/material@angular/cdk包。可以使用以下命令进行安装:

npm install @angular/material @angular/cdk

接下来,导入SnackBar和SnackBarConfig类以及MatSnackBarModule模块。在组件的.ts文件中添加以下代码:

import { Component } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

@Component({
  selector: 'app-snackbar-example',
  templateUrl: './snackbar-example.component.html',
  styleUrls: ['./snackbar-example.component.css']
})
export class SnackbarExampleComponent {
  constructor(private snackBar: MatSnackBar) { }

  showSnackBar() {
    const config = new MatSnackBarConfig();
    config.duration = 2000; // 设置SnackBar显示时间为2秒,默认为3秒
    config.panelClass = ['custom-snackbar']; // 添加自定义CSS类到SnackBar

    this.snackBar.open('This is a snack bar message', 'Close', config);
  }
}

在上述代码中,showSnackBar()方法用于显示SnackBar。可以使用MatSnackBarConfig类来配置SnackBar。在上面的例子中,我们将显示时间设置为2秒,并将自定义CSS类custom-snackbar添加到SnackBar。

最后,在组件的HTML模板中,添加一个按钮来触发showSnackBar()方法:


你也可以自定义SnackBar的外观和样式。在全局的styles.css文件中添加以下代码:

.custom-snackbar {
  background-color: green;
  color: white;
}

上述代码将SnackBar的背景颜色设置为绿色,并将文字颜色设置为白色。

这样,当用户点击"Show SnackBar"按钮时,SnackBar将显示2秒钟,然后自动消失。

相关内容

热门资讯

Android Recycle... 要在Android RecyclerView中实现滑动卡片效果,可以按照以下步骤进行操作:首先,在项...
安装apache-beam==... 出现此错误可能是因为用户的Python版本太低,而apache-beam==2.34.0需要更高的P...
Android - 无法确定任... 这个错误通常发生在Android项目中,表示编译Debug版本的Java代码时出现了依赖关系问题。下...
Android - NDK 预... 在Android NDK的构建过程中,LOCAL_SRC_FILES只能包含一个项目。如果需要在ND...
Akka生成Actor问题 在Akka框架中,可以使用ActorSystem对象生成Actor。但是,当我们在Actor类中尝试...
Agora-RTC-React... 出现这个错误原因是因为在 React 组件中使用,import AgoraRTC from “ago...
Alertmanager在pr... 首先,在Prometheus配置文件中,确保Alertmanager URL已正确配置。例如:ale...
Aksnginxdomainb... 在AKS集群中,可以使用Nginx代理服务器实现根据域名进行路由。以下是具体步骤:部署Nginx i...
AddSingleton在.N... 在C#中创建Singleton对象通常是通过私有构造函数和静态属性来实现,例如:public cla...
Alertmanager中的基... Alertmanager中可以使用repeat_interval选项指定在一个告警重复发送前必须等待...