在Angular 2中集成Angular Material的問題

我正在嘗試設置Angular 2的Material Design和運行到一個問題，其中組件的顏色沒有顯示出來，而且按鈕上的漣漪效應也不起作用。但動畫工作得很好。在Angular 2中集成Angular Material的問題

我錯過了爲顏色和漣漪效應添加任何東西而不工作？！

的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" 
    } 
}

的index.html與SystemJS設置

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

這是按鈕現在怎麼渲染。

來源

2016-11-09 Pramodh

你應該頭就到他們的倉庫和他們在功能開發那裏讀了。請記住，這些傢伙仍然在阿爾法！ https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md – silentsod

您的問題尚未解決。我面臨同樣的問題。 – arjukhan

隨着材料2的當前版本中，您可以在您的index.html預建的主題。

事情是這樣的：

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

來源

2017-07-19 17:35:18

在Angular 2中集成Angular Material的問題

回答

相關問題