Question

我正在尝试使用Material设计设置Angular 2项目并遇到一个问题，即组件的颜色没有显示，并且按钮上的波纹效果也不起作用。但动画效果还不错。

我是否错过了添加任何颜色和涟漪效果而无法正常工作？！

package.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!';
}

这就是按钮渲染的方式。

Answer 1

使用当前版本的material2，您可以在index.html中包含预建主题。

这样的事情：

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

在Angular 2中集成角度材质的问题

1 个答案: