Probleme mit Snackbar in Angular

Question

Ich versuche, die Snack-Bar aus eckigen Materialien zu verwenden, aber ich stieß auf ein Problem - die Snackbar erscheint nicht auf der Schaltfläche des Bildschirms, es erscheint unter der Schaltfläche, die anfordert es. Eine andere Sache, die passiert, dass es auch den Text von der Imbissbar auf meiner Seite setzt.

Hier ist der Code, den ich verwendet:

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 { 

} 

Dank!

Answer 1

Sie benötigen eine der prebuilt Themen in Ihrem Projekt zu importieren. Ich habe versucht, ohne das vorgefertigte Thema und Snackbar verursacht das Problem, das Sie erwähnt haben.

Plunker without prebuilt theme

Einmal habe ich hinzugefügt, Snackbar in plunker hat gut funktioniert.

einen Testlauf durch in Ihrer index.html head folgende Zugabe

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

Answer 2

Versuchen Sie zu Ihrem CSS hinzufügen:

body { 
    height:100%; 
}