0
MaterialデザインでAngular 2プロジェクトをセットアップしようとしていて、コンポーネントの色が表示されず、ボタンの波紋効果が作用しないという問題が発生しています。しかし、アニメーションは正常に動作しています。Angular MaterialをAngular 2に統合する問題
色と波紋効果のために何も追加していないのですか？ SystemJSセットアップと
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を
<!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!';
}
これは、ボタンが現在のレンダリング方法です。 material2の現在のバージョンで
あなたは自分のリポジトリに上に向かうと、彼らは機能開発中にいるところをよく読んでなければなりません。覚えておいて、これらの人はまだアルファです！ https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md – silentsod
あなたの問題はまだ解決しましたか？私は同じ問題に直面しています。 – arjukhan