PrimeNG 波纹效应在 Angular 中不起作用

Question

我在使用 PrimeNG 的 Angular 应用程序中无法获得连锁反应。尽管遵循了文档和各种教程，但涟漪效应似乎并未在我的

p-button

组件上激活。这是我到目前为止所做的：

环境

• 角度版本：17

• PrimeNG 版本：17+

采取的步骤

创建了

PrimengModule

来配置 PrimeNG：

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

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

@NgModule({
  declarations: [],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAppFactory,
      deps: [PrimeNGConfig],
      multi: true,
    },
  ],
  imports: [ButtonModule, RippleModule],
  exports: [ButtonModule, RippleModule],
})
export class PrimengModule {}

导入

PrimengModule

到我的

LoginComponent.ts

import { Component } from '@angular/core';
import { PrimengModule } from '../../../../shared/modules/primeng/primeng.module';

@Component({
  selector: 'app-learner-login',
  standalone: true,
  imports: [PrimengModule],
  templateUrl: './learner-login.component.html',
  styleUrl: './learner-login.component.scss'
})
export class LearnerLoginComponent {

}

这是我的

LoginComponent.html

使用 pRipple 指令

<p-button
  pRipple
  label="Submit"
  icon="pi pi-check"
  iconPos="right"
  size="small"
></p-button>

向

styles.scss

添加了 PrimeNG 和 PrimeIcons CSS：

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";

@layer tailwind-base, primeng, tailwind-utilities;
        


@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

尽管有这些配置，当我单击按钮时，涟漪效应并不可见。控制台中没有错误，并且按钮可以正确呈现，其他 PrimeNG 样式和功能也按预期工作。

我尝试过的事情

• 确保 CSS 文件正确加载。

• 检查浏览器控制台是否有错误。

• 已验证

  PrimeNGConfig

  已初始化且

  ripple

  已设置为

  true

  。

  问题

  我错过了什么或做错了什么？如何在我的 Angular 应用程序中使用 PrimeNG 获得连锁反应？

Answer 1

APP 初始化程序可能是问题所在，因为它应该位于模块的根部，并且通常这适用于引导角度应用程序的模块化方法。相反，只需在应用程序的根独立组件中将

this.primengConfig.ripple

设置为

true

。

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
    styles: [`
        :host ::ng-deep button {
            margin-right: .5em;
        }
    `]
})
export class AppComponent { 
  constructor(private primengConfig: PrimeNGConfig) {}

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

Stackblitz 演示