Question

如何使用Angular进行自举材料设计。

这是我到目前为止所尝试的内容。我正在使用cli构建我的角度项目。

angular-cli.json文件

我已经使用npm安装了MDB并将它们添加到我的angular cli json文件中。

"styles": [
        "styles.css",
        "../node_modules/mdbootstrap/css/bootstrap.css",
        "../node_modules/mdbootstrap/css/mdb.css"
      ],
      "scripts": [
        "../node_modules/mdbootstrap/js/jquery-3.1.1.js",
        "../node_modules/mdbootstrap/js/tether.js",
        "../node_modules/mdbootstrap/js/bootstrap.js",
        "../node_modules/mdbootstrap/js/mdb.js"
      ],

现在我将代码添加到组件中。

<button type="button" class="btn btn-warning">Warning</button>

代码不会引发任何错误，但点击波和单击不起作用。请帮忙

Answer 1

要在Angular中使用mdbootstrap，您应该通过npm安装 Angular版本：

npm i angular-bootstrap-md -save

也使用FontAwesome，因此请务必将其添加到您的样式中：

"../node_modules/font-awesome/scss/font-awesome.scss"

最后，在您的 app.module.ts 中，您需要包含：

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { NO_ERRORS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
   ...,
    MDBBootstrapModule.forRoot()
  ],
  schemas: [NO_ERRORS_SCHEMA]
})

在github页面上查看更多信息：

https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design

Answer 2

假设您安装了npm软件包并正确配置（请参阅here），您只需在按钮标记中添加 mdbRippleRadius 指令，如下所示：

<button type="button" class="btn btn-warning" mdbRippleRadius>Warning</button>

希望它有所帮助！

Answer 3

只需执行此命令，它将自动在配置文件中添加所需的路径。

ng add angular-bootstrap-md

具有角度的MdBootstrap

3 个答案: