如何在angular2（material2）中设置小吃店的持续时间

Posted 2023-02-23

【中文标题】如何在angular2（material2）中设置小吃店的持续时间

【英文标题】：How can I set duration of a snack-bar in angular2 (material2)

【发布时间】：2017-03-04 05:55:59

【问题描述】：

这个例子永远停留在屏幕上：

snack-bar-demo.ts

import Component, ViewContainerRef from '@angular/core';
import MdSnackBar, MdSnackBarConfig from '@angular/material';

@Component(
  moduleId: module.id,
  selector: 'snack-bar-demo',
  templateUrl: 'snack-bar-demo.html',
)
export class SnackBarDemo 
  message: string = 'Snack Bar opened.';
  actionButtonLabel: string = 'Retry';
  action: boolean = false;

  constructor(
      public snackBar: MdSnackBar,
      public viewContainerRef: ViewContainerRef)  

  open() 
    let config = new MdSnackBarConfig(this.viewContainerRef);
    this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
  

如何让它在 2 秒后消失（以某种方式设置持续时间/超时）？

【参考方案1】：

这应该可以工作

open(msg,t=2000) 
        let config = new MdSnackBarConfig(this.viewContainerRef);
        let simpleSnackBarRef = this.snackBar.open(msg, 'ok, gotcha', config);
        setTimeout(simpleSnackBarRef.dismiss.bind(simpleSnackBarRef), t);
    

【讨论】：

这行得通。谢谢！！我只是想知道你是否真的这样做是为了实现设计的行为，或者 MdSnackBar 中已经有一些东西，如下所述：snack-bar>“它们通过被刷出屏幕或在超时或其他地方的用户交互后自动消失（例如召唤新的表面或活动）。”

我认为目前还没有类似的东西。如果您查看open 方法，您将找不到任何定时解雇程序。也就是说，小吃店的状态仍然是 概念验证 npm。他们可能/希望将这些好东西添加到其中，以使其与您链接的预期设计规范更紧密地保持一致。

【参考方案2】：

使用 Angular 材质 2.0.0-alpha.11，您现在可以为小吃店添加超时。

open() 
    let config = new MdSnackBarConfig();
    config.duration = 10;
    this.snackBar.open("Message", "Action Label", config);

【讨论】：

哇，你真快。我也想更新这个，只是在等待发布:) 谢谢。

【参考方案3】：

持续时间可以通过可选的配置对象传递：

this.snackBar.open(
    this.message,
    this.action && this.actionButtonLabel,  
        duration: 2000
    
);

【参考方案4】：

this._snackBar.open('Your Text','',
     
      duration: 2000
  );