Angular 4 app（+ Angular CLI）で角度材料設計を使用する

Question

Angular 4 app（Angular CLI）でbootstrap-material-designを使用するにはどうすればいいですか？私はちょうどこのように私のStyles.cssをしてCSSファイルを追加

：

@import "~bootstrap-material-design/dist/css/bootstrap-material-design.min.css"; 

私は、ブートストラップ材料設計クラスにアクセスすることができますが、それは次のようになりますように、入力のようないくつかの要素が動作しません。

jquareとbootstrap-material-designスクリプトを.angular-cli.jsonファイルに追加する必要がありますが、動作しませんでした。

正しい方法は何ですか？

投稿者から、次のjavascriptをサイトに追加することで、素材のJavaScriptを初期化する必要がありますが、できません。

$.material.init() 

Answer 1

私を助ける彼の答えはナノにありがとう。

だから、私は角度-cli.jsonにこのような私のスタイルとスクリプトを追加しました：

"styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
     "../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.min.css", 
     "styles.css" 
    ], 
    "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.min.js", 
     "../node_modules/bootstrap-material-design/dist/js/material.min.js" 
    ] 

はその後、我々は、ブートストラップ・材料設計を初期化する必要があります。 これは、コンテキストの初期化後に行うことが重要です。だから、ngOnInit（）は私にとって完璧でした。 私はこのように私のapp.component.tsでいることをやった：

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

declare let jQuery: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent implements OnInit { 
    ngOnInit() { 
     // Init bootstrap-material-design 
     jQuery.material.init(); 
    } 
} 

をそして、それは私が望むように動作します。入力は正常です。

Answer 2

あなたがあなたのプロジェクトにすべてのCSSやJSファイルをリンクすることができるはず

npm install --save bootstrap-material-design 

を実行してライブラリをインストールしている一つ。

これを行うには、ファイルをangular-cli.jsonファイルにリンクする必要があります。

jsonで塗りつぶす配列は、それぞれCSSの場合はstyles、jsの場合はscriptsです。

"styles": [ 
    ... 
    "../node_modules/bootstrap-material-design/sass/bootstrap-material-design.scss" 
    ... 
    ] 

    ... 

    "scripts": [ 
    "../node_modules/bootstrap-material-design/scripts/index.js" 
    ] 

これはうまくいきます。

EDIT：

あなたがより簡単にマテリアルデザインを使用したい場合は、この1試すことができます。

https://github.com/angular/material2

をこれはよくフレームワークに統合され、また、公式のものです。