Как я могу установить продолжительность буфета в angular2 (material2)

#angular #material-design #snackbar #angular-material2 #angular2-material

#angular #материал-дизайн #буфет #angular-material2 #angular2-материал

Вопрос:

Этот пример навсегда останется на экране:

 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 amp;amp; this.actionButtonLabel, config);
  }
}

Как я могу заставить его исчезнуть через 2 секунды (каким-то образом установить продолжительность / тайм-аут)?

Ответ №1:

С angular material 2.0.0-alpha.11 теперь вы можете добавить время ожидания в snackbar.

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

Ответ №2:

это должно сработать

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

1. Это работает. Спасибо!! Мне просто интересно, действительно ли вы делаете это таким образом, чтобы добиться запланированного поведения, или в MdSnackBar уже есть что-то, что реализовано, как описано здесь: буфет > «Они завершаются, проводя пальцем за пределы экрана, или автоматически исчезают после тайм-аута или взаимодействия с пользователем в другом месте (например, вызова новой поверхности или действия)».

2.Я не думаю, что на данный момент есть что-то подобное. Если вы посмотрите на метод open, вы не найдете никакой процедуры увольнения по расписанию. Тем не менее, статус буфета по-прежнему является проверкой концепции npm. Они, вероятно / надеемся, добавят этот хороший материал, чтобы более точно согласовать его с предполагаемыми спецификациями дизайна, на которые вы ссылались.

Ответ №3:

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

Ответ №4:

Продолжительность может быть передана через необязательный объект конфигурации:

 this.snackBar.open(
    this.message,
    this.action amp;amp; this.actionButtonLabel, { 
        duration: 2000
    }
);

Ответ №5:

Вы можете сделать вот так (angular 8 )

 openMessageSnackBar("Server error", "OK");

 openMessageSnackBar(message: string, action: string) {
  this._snackBar.open(message, action, {
    horizontalPosition: "center",
    verticalPosition: "left",
    duration: 5000,
  });
}