带角度的MdBootstrap

Question

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

这是我到目前为止所尝试过的。我正在使用cli来构建我的angular项目。

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