如何在 Angular 4 应用程序中使用 bootstrap-material-design(使用 Angular CLI(?
我刚刚在我的styles.css
中添加了css文件,如下所示:
@import "~bootstrap-material-design/dist/css/bootstrap-material-design.min.css";
我可以访问引导材料设计类,但某些元素(如输入(无法正常工作。
我想我必须在.angular-cli.json
文件中添加jQuery
和bootstrap-material-design
脚本,但这也没有用。
正确的方法是什么?
从 Docs 中,我需要通过将以下 javascript 添加到您的网站来初始化材料 javascript,但我不能。
$.material.init()
通过运行安装了库
npm install --save bootstrap-material-design
您应该能够将所有CSS和JS文件链接到您的项目。
为此,您应该在angular-cli.json
文件中链接此类文件。
要填充 json 的数组分别styles
用于 css 和 scripts
用于 js。
"styles": [
...
"../node_modules/bootstrap-material-design/sass/bootstrap-material-design.scss"
...
]
...
"scripts": [
"../node_modules/bootstrap-material-design/scripts/index.js"
]
希望这对你有用!
编辑:
如果你想更容易地使用Material Design,你可以试试这个:
https://github.com/angular/material2
它也是官方的,与框架很好地集成在一起。
感谢Nano的回答,这对我有帮助。
因此,我在angular-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();
}
}
它像我想要的那样工作。输入正常。