0

Material design を使用して Angular 2 プロジェクトをセットアップしようとしていますが、コンポーネントの色が表示されず、ボタンの波及効果も機能しないという問題が発生しています。ただし、アニメーションは問題なく動作します。

色と波及効果が機能しないために何かを追加し忘れたことがありますか?!

パッケージ.json 

{
  "name": "sample-project",
  "version": "1.0.0",
  "description": "sample project",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.1.2",
    "@angular/compiler": "^2.1.2",
    "@angular/core": "^2.1.2",
    "@angular/forms": "^2.1.2",
    "@angular/http": "^2.1.2",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "^2.1.2",
    "@angular/platform-browser-dynamic": "^2.1.2",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.0-rc.2",
    "systemjs": "^0.19.40",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34"
  }
}

SystemJS セットアップを使用した index.html

<!DOCTYPE>
<html>
    <head>
        <title>Sample Project</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <script src="../node_modules/zone.js/dist/zone.js"></script>
        <script src="../node_modules/reflect-metadata/Reflect.js"></script>
        <script src="../node_modules/systemjs/dist/system.js"></script>
        <script>
            System.config({
            // we want to import modules without writing .js at the end
            defaultJSExtensions: true,
            // the app will need the following dependencies
            map: {
            '@angular/core': '../node_modules/@angular/core/bundles/core.umd.js',
            '@angular/common': '../node_modules/@angular/common/bundles/common.umd.js',
            '@angular/compiler': '../node_modules/@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': '../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': '../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/material': '../node_modules/@angular/material/material.umd.js',
            '@angular/forms': '../node_modules/@angular/forms/bundles/forms.umd.js',
            '@angular/http': '../node_modules/@angular/http/bundles/http.umd.js',
            'rxjs': '../node_modules/rxjs'
            }
            });
            // and to finish, let's boot the app!
            System.import('main');
        </script>
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, MaterialModule.forRoot()],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {

}

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<h1>{{title}}</h1>aasdasd<button md-raised-button>RAISED</button>
                <button md-button>FLAT</button>
                <button md-raised-button>RAISED</button>
                <button md-icon-button>
                    <md-icon class="md-24">favorite</md-icon>
                </button>
                <button md-fab>
                    <md-icon class="md-24">add</md-icon>
                </button>
                <button md-mini-fab>
                    <md-icon class="md-24">add</md-icon>
                </button>
                <button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
                `
})
export class AppComponent {
    title = 'app setup completed!';
}

これが現在のボタンのレンダリング方法です。

ここに画像の説明を入力

4

1 に答える 1

0

現在のバージョンの material2 では、事前に作成されたテーマを index.html に含めることができます。

このようなもの：

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
于 2017-07-19T17:35:18.003 に答える