Angular-material MatSnackBar 默认持续时间

7
我们的团队在应用程序中使用了 Angular Material 的 MatSnackBar。由于每个人负责不同的页面,每个页面的 snackBars 持续时间不同。有些人将持续时间设置为 2000ms,其他人将其设置为 1000ms,甚至有些人将其设置为 3000ms。
我希望从一个单一变量中获取持续时间值,这样我就可以在一个地方控制所有 snackBars 的持续时间。甚至可以省去在调用 snackBar.open 函数时发送持续时间值的开发人员的麻烦。
this.snackBar.open(message, {
  duration: 2000,
});

什么是最佳的it技术实践方法?

1
你可能正在寻找一个使用 BehaviorSubject单例服务 - Z. Bagley
这将强制所有开发人员在使用natSnackBar的每个页面中注入另一个服务。难道没有更优雅的方式吗? - Udi Mazor
1
没错,而且没有其他选项可以不直接编辑 MatSnackBarModule。你只需要在那里添加 BehSub 而不是新服务。 - Z. Bagley
非常感谢。您能否解释一下如何做?BehSub是什么? - Udi Mazor
2
这是 BehaviorSubject。如果您计划在生产中使用它,将其嵌入npm包中需要相当多的工作。强烈建议仅使用单例服务,而不尝试编辑Material模块。 - Z. Bagley
3个回答

16

你应该设置一个应用程序范围的默认 Snackbar 配置


@NgModule({
  providers: [
    {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 2500}}
  ]
})

您仍需要仔细查看现有代码并删除传递显式持续时间的实例,但是未来的代码可以只使用this.snackbar.open(msg),而无需任何选项。


这是正确的方式,尽管是我自己的答案 :-) - Udi Mazor

3
我最简单的方法是:
this.snackBar.open("Item added to Cart", "X", {"duration": 2000});

所以对于您的情况,从集中的常量变量获取持续时间的值。

1
我通过包装MatSnackBar并使用对话框打开的工厂解决了这个问题。
import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

@Injectable()
export class SnackBarService {
  private config: MatSnackBarConfig;
  constructor(private snackBar: MatSnackBar) {
this.config = new MatSnackBarConfig();
this.config.duration = 2000;
}
public open(message: string, duration?: number, action?: string) {
this.config = duration ? Object.assign(this.config, { 'duration': duration }) : this.config;
this.snackBar.open(message, action, this.config);
}}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接