在Angular 4應用程序中使用角度材質設計（+ Angular CLI）

Question

如何在Angular 4應用程序中使用bootstrap-material-design（使用Angular CLI）？

我剛纔添加的CSS文件中我styles.css的是這樣的：

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

我可以接觸到引導材料設計類，但輸入等一些元素不工作像它會是。

我想我必須在.angular-cli.json文件中添加jQuery和bootstrap-material-design腳本，但它不起作用。

什麼是正確的方法？

從文檔中，我需要通過將以下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

One的運行

npm install --save bootstrap-material-design 

你應該能夠給所有的CSS和JS文件鏈接到您的項目安裝庫。

爲此，您應該鏈接angular-cli.json文件中的這些文件。

填充json的數組分別爲爲css和scripts爲js。

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

    ... 

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

希望這適合你！

編輯：

如果你想更方便地使用材料設計，你可以試試這個：

https://github.com/angular/material2

這也是官方的一個，與框架很好地集成。