Angular 中的小吃栏问题

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>

应用程序组件.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

添加后，plunker中的零食栏就可以正常工作了。

通过在 index.html 中添加以下内容来运行测试head

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