Angular 中的小吃店问题

Question

我正在尝试使用 angular 材料中的小吃店，但我遇到了一个问题 - 小吃店没有出现在屏幕的按钮上，它出现在调用的按钮下面为了它。发生的另一件事是它还将小吃店的文本放在我的页面上。

这是我使用的代码：

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

尝试添加到您的 css:

body {
     height:100%;
}

Answer 2

您需要在项目中导入其中一个预建主题。我在没有预建主题的情况下进行了尝试，而 snackbar 导致了您提到的问题。

Plunker without prebuilt theme

添加后，plunker 中的小吃店工作正常。

运行通过在 index.html head

中添加以下内容进行测试

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

Angular 中的小吃店问题

Problems with snackbar in Angular

angular-material2

angular