在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

这也是官方的一个，与框架很好地集成。