带角度的 mdbootstrap - 动画不起作用答案

【问题标题】：mdbootstrap with angular - animations not working带角度的 mdbootstrap - 动画不起作用
【发布时间】：2017-08-25 13:03:32
【问题描述】：

我已按照此处的指南进行操作：https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design。事情看起来像我所期望的那样，但动画不起作用。在此演示页面上：https://mdbootstrap.com/components/buttons/ 按钮在单击时具有波浪效果，但是当我将演示代码复制/粘贴到我的（测试）app.component.html 中时，则没有波浪效果。

似乎有些事件处理程序没有注册，但我不知道如何做到这一点......

编辑

经过一番摸索，我居然发现了如何让涟漪发挥作用！ :) 这是我的 app.module.ts（RippleModule 导入很重要）：

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { RippleModule } from 'angular-bootstrap-md/ripple';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    RippleModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {}

如何在按钮上使用波纹的示例：

<!-- mdbRippleRadius attribute (directive) and the waves-light class is imporant -->
<button type="button" class="btn btn-primary waves-light" mdbRippleRadius >Primary</button>

【问题讨论】：

轮播也不起作用。所以我想念一些 js，但不确定是什么！
这有点不相关，但是随着我使用 Angular 制作越来越多的项目，我实际上发现使用 @angular/flex-layout 比使用带有 flex 的 angular 项目的 bootstrap 更好的解决方案盒子。它可能超出了您正在做的事情的范围，但想让您知道它的存在。
我同意，如果仅用于网格布局系统，则不再有充分的理由使用引导程序。但是 mdboostrap 的战利品远不止这些 :)

标签： angular material-design mdbootstrap

【解决方案1】：

如果您使用 Angular.io，则需要将指令 mdbRippleRadius 添加到您的 html 中。

<button type="button" class="btn btn-primary" mdbRippleRadius>Primary</button>

查看使用 Material Design 的 Angular Bootstrap：

https://mdbootstrap.com/angular/components/buttons/

【讨论】：