Как автоматически закрыть закусочную в angular материале

Question

Я установил снэк-бар, когда пользователь входит в систему, и он / она получает уведомление из снэк-бара, был ли вход успешным или неудачным. В моей реализации снэк-бар появляется, когда пользователь может щелкнуть «отклонить», и снэк-бар исчезнет. Как автоматически закрыть закусочную?

  onSubmit() {
    this.isLoggedInError = true;
    // console.log(this.username);
    this.userService.login(this.username, this.password)
      .subscribe((res: any) => {
        // console.log(res);
        this.isLoggedInError = false;
        // console.log("HERE IS THE res")
        // console.log(res.token);
        // this.logInresponsePayload = res;
        // localStorage.setItem('username', res.username);
        localStorage.setItem('userToken', res.token);

        localStorage.setItem('userRoles', res.roles_list);
        // this.router.navigate(['/dashboard']);
        // console.log(res.token);

        // console.log(res.status_code);

        // Add ROLES : Predefine roles  add check 
        if (res.token === null ) {
          const  message = 'Wrong credentials provided!';
          this.snackbar.open(message, 'Dismiss');
          // this.router.navigate(['/']);

          // this.router.navigate(['/dashboard']);
        } else {
          // console.log("print 200")
          const msg = 'Login successfull!';
          this.snackbar.open(msg, 'Dismiss');
          this.router.navigate(['/dashboard']);
        }

        // localStorage.setItem('apps', res.apps);


      },
        (err: HttpErrorResponse) => {
          this.isLoggedInError = false;
        }
      );

  }

Answer 1

Вы можете установить длительность для каждой закусочной отдельно или установить глобальные настройки по умолчанию :

// Single snack bar
snackbar.open('Message archived', 'Undo', {
  duration: 3000
});

// Global settings in app.module.ts
@NgModule({
  providers: [
    {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 2500}}
  ]
})

Также полезно знать :

Одновременно может быть открыт только один снэк-бар. Если новая закусочная открывается, когда предыдущее сообщение все еще отображается, старое сообщение будет автоматически отклонено.

Answer 2

Все, что вам нужно сделать, это добавить длительность:

  this._snackBar.open(message, 'Dismiss', {
  duration: 2000,
});

В этом случае оно закроется через 2 секунды.

Answer 3

snackbar.open(msg, '', {
  duration: 1000
});

Попробуйте это

Answer 4

Вам нужно использовать длительность: вы можете увидеть ее здесь:

https://material.angular.io/components/snack-bar/overview#dismissal