在 Angular 4 应用程序中使用 angular-material-设计（+ Angular CLI）

Question

如何在 Angular 4 应用中使用 bootstrap-material-design（with Angular CLI）？

我刚刚在 styles.css 中添加了 css 文件，如下所示：

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

我可以访问 bootstrap-material-design 类但某些元素（例如输入）无法正常工作。

我想我必须在 .angular-cli.json 文件中添加 jQuery 和 bootstrap-material-design 脚本，但这也不起作用。

正确的方法是什么？

在文档中，我需要通过将以下 javascript 添加到您的站点来初始化 material javascript，但我不能。

$.material.init()

Answer 1

你已经通过运行

安装了库

npm install --save bootstrap-material-design

您应该能够 link 所有 css 和 js 文件到您的项目中。

为此，您应该在 angular-cli.json 文件中 link 此类文件。

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"
  ]

希望这对你有用！

编辑：

如果你想更轻松地使用Material设计你可以试试这个：

https://github.com/angular/material2

也是官方的，和框架结合的很好

Answer 2

感谢 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"
    ]

然后，我们要初始化bootstrap-material-设计。在上下文初始化之后做这件事很重要。所以，在 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();
    }
}

而且效果如我所愿。输入正常。

在 Angular 4 应用程序中使用 angular-material-设计（+ Angular CLI）

Using angular-material-design in Angular 4 app (+ Angular CLI)

jquery

angular

typescript

angular-cli

bootstrap-material-design