Angular 2 Snackbar - 全局持续时间配置

Posted 2023-02-23

【中文标题】Angular 2 Snackbar - 全局持续时间配置

【英文标题】：Angular 2 Snackbar - Global Duration Config

【发布时间】：2017-05-05 22:37:43

【问题描述】：

我可以像这样设置小吃店消息的持续时间

let config = new MdSnackBarConfig();
config.duration = 5000;

this.snackBar.open(element.text, 'OK', config);

但是我需要为多个小吃店设置持续时间，并且不想每次都传递配置。

我可以以某种方式设置全局持续时间配置吗？

谢谢！

【参考方案1】：

我知道这篇文章是几年前的，但为了将来的参考，我还是会回答这个问题。希望我能像我一样帮助看到这篇文章的人。

您现在可以使用@NgModule 中的提供程序为模块注入带有默认选项的MatSnackBar：

import  MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS  from '@angular/material';

@NgModule(
    declarations: [],
    imports: [
        MatSnackBarModule
    ],
    exports: [
        MatSnackBarModule
    ],
    providers: [
         provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue:  duration: 2500  
    ]
)

来源：Material Angular doc's

【参考方案2】：

我们所做的是在模块级别包含一个外部 app.config.ts 文件，并将其包含在我们需要的地方。这是文件中内容的一个示例。

export class Config 
    static apiUrl = "api/";
    static token = "";
    static snackBarDurration = 5000;
    ......

然后，您所要做的就是在您的模块中声明它，然后将其导入您想要使用它的组件或服务中。这是一个例子。

import  Injectable  from "@angular/core";
import  Config  from "../../app.config";

@Injectable()
export class SnackBarService 

    .... // declare your snackbar here

    constructor()  

    showSnackBar(elementText: string)
        let config = new MdSnackBarConfig();
        config.duration = Config.snackBarDurration; // Here is your change

        this.snackBar.open(elementText, 'OK', config);
    

【参考方案3】：

我知道这不是全局配置的解决方案，而是 使调用更紧凑我在参数中声明了配置：

this.snackBar.open(elementText, 'OK',  duration: 3000 );

【讨论】：

这是针对特定场景的有效解决方案。 OP 问题是@Mike Bovenlander 提出的全局配置。