如何在 Angular 2 中使用 snackBar

Question

我用的是sanckbar，但是它的位置不在底部

可能是什么问题？

Answer 1

当没有提供代码时，很难检查出什么问题。但是，我正在使用 MdSnackBar（仍在开发中），它对我有用。

首先，必须包含 "snackbar component" 本身，以及 "MdSnackBarConfig" 使用：

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

在此之后，我们可以在构造函数中创建或初始化 snackbar 项和我们的 viewContainerRef：

 constructor(
    private snackbar: MdSnackBar,
    public viewContainerRef: ViewContainerRef,
  ) { }

现在我们可以随时调用要显示的快餐栏，使用：

   let config = new MdSnackBarConfig(this.viewContainerRef);
   this.snackbar.open('Snackbar text', 'Ok', config);

请参阅 github 了解更多信息和更新，因为这是初始版本。

希望这能有所帮助

Answer 2

将 ViewContainerRef 传递给配置会将 snackbar 限制为相同。你应该通过 config.viewContainerRef = null。这会将 snackBar 放在页面的中央。

Answer 3

希望对大家有所帮助:

import { MdSnackBar } from '@angular/material';
export class DemoWhosebug{
    constructor(
        private snackBar: MdSnackBar
    ){}

    showSnackBar(){
        this.snackBar.open("Yes i am Coming", "Ok", {
            duration: 9000
        }
    }
}

如何在 Angular 2 中使用 snackBar

How to use snackBar in Angular 2

angular-material2