角度のスナックバーに関する問題

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でのスナックバーがうまく働きました。

は head

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

Answer 2

は、あなたのCSSに追加してみてください。

body { 
    height:100%; 
}