Prime ng 11.4.0 波纹动画不起作用

Question

我已经在我的 Angular 应用程序中成功安装了 primeng ！样式工作正常，但按钮点击上的波纹动画不起作用！

在我的应用程序组件中 -

    import { PrimeNGConfig } from 'primeng/api';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })

export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig) {}

    ngOnInit() {
        this.primengConfig.ripple = true;
    }

}

我还在我的应用程序模块中导入了 BrowserAnimationsModule！但它仍然不起作用！如果我遗漏了什么，请告诉我！

Answer 1

PrimeNG 按钮上的连锁反应摘要：

波纹效果由对象全局启用PrimeNGConfig。您必须将该ripple属性设置为true。就我个人而言，我更喜欢在令牌内执行此操作APP_INITIALIZER，而不是在AppComponent：

应用程序模块.ts

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

const initializeAppFactory = (primeConfig: PrimeNGConfig) => () => {
      // ......
      primeConfig.ripple = true;
    };

     @NgModule({
        // .....
        providers: [
           {
              provide: APP_INITIALIZER,
              useFactory: initializeAppFactory,
              deps: [PrimeNGConfig],
              multi: true,
           },
        ]
     })
    export class AppModule {}

涟漪效应仅在. 该指令在内部检查属性from是否设置为。pRippleRippleModuleripplePrimeNGConfigtrue

该p-button组件已经在其模板中pRipple使用了指令。因此，如果您在全局范围内启用了连锁反应，则无需执行更多操作，也无需导入.RippleModule

令人困惑的部分：

但是，如果您使用带有指令的 html 按钮元素pButton，默认情况下不会产生连锁反应。您必须手动添加pRipple指令并导入RippleModule。( <button pButton pRipple ....>TEST</button>)。