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

时间:2016-10-21 20:16:51

标签: angular material-design snackbar angular-material2 angular2-material

此示例永远停留在屏幕上:

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秒后消失(以某种方式设定持续时间/超时)?

4 个答案:

答案 0 :(得分:10)

使用角度材质2.0.0-alpha.11,您现在可以向小吃栏添加超时。

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

答案 1 :(得分:7)

这应该有效

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);
    }

答案 2 :(得分:2)

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

IThing

答案 3 :(得分:0)

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