在角4应用程序中使用角材料设计(+角CLI)

Question

如何在角4应用程序中使用鞋带.材料.设计 (带有角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()

Answer 1

谢谢纳诺的回答，这对我很有帮助。

因此，我将类似于这样的样式和脚本添加到ange-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

一个您已通过运行

npm install --save bootstrap-material-design

您应该能够将所有css和js文件链接到您的项目。

要做到这一点，您应该将这些文件链接到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"
  ]

希望这对你有用！

编辑：

如果你想更容易地使用材料设计，你可以试试这个：

https://github.com/angular/material2

它也是正式的，与框架很好地结合在一起。