Angular中的snackbar问题

Question

我正在尝试使用角料的小吃吧，但我遇到了一个问题 - 小吃栏没有出现在屏幕的按钮上，它出现在要求它的按钮下面。发生的另一件事是，它还会将小吃栏中的文字放在我的页面上。

这是我使用的代码：

Snackbar.ts

import { Component, OnInit } from '@angular/core';
import {MdSnackBar} from '@angular/material';

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.css']
})
export class SnackBarComponent implements OnInit {

  constructor(public snackBar: MdSnackBar) {}

  ngOnInit() {
  }

  openSnackBar() {
    this.snackBar.open("Hello World","action",{duration: 500});
  }
}

Snackbar.html

<button md-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Click me
</button>

app.component.ts

import { Component } from '@angular/core';
import { SnackBarComponent } from './components/snack-bar/snack-bar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

} 

谢谢！

Answer 1

您需要导入项目中的一个预建主题。我试过没有预先构建的主题和小吃吧导致你提到的问题。

Plunker without prebuilt theme

我添加它后，plunker中的零食栏工作正常。

通过在index.html head

中添加以下内容来运行测试

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Answer 2

尝试添加到您的CSS：

body {
     height:100%;
}