Angular 18 中 Flowbite 和 PrimeNG 的动画问题

Question

我正在开发一个 Angular 18 zoneless 应用程序，使用 Flowbite 作为主要组件库，但我也必须安装 PrimeNG，因为我的表单需要 <p-multiSelect>。

问题是，当我在“app.config.ts”中添加所需的“BrowserAnimationsModule”时（没有它，p-multiSelect 的下拉菜单将无法工作），我的 Flowbite 抽屉和下拉菜单我在导航栏组件中使用停止工作。

它们仅在我刷新页面时才起作用，但是当我在组件之间导航时，它们会停止工作。

app.component.ts代码

import { Component, inject, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
  // Dependencias
  private _translateService = inject(TranslateService);

  ngOnInit(): void {
    // Comprobamos si hay algún idioma almacenado, y si no lo hay, establece el español ('es') por defecto.
    const defaultLang = localStorage.getItem('language') || 'es';
    this._translateService.setDefaultLang(defaultLang);
    this._translateService.use(defaultLang);
  }
}

app.config.ts代码：

import {
  ApplicationConfig,
  importProvidersFrom,
  provideExperimentalZonelessChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Función que se encarga de cargar los archivos de traducción. (ngx-translate)
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes),
    provideHttpClient(),
    importProvidersFrom(
      TranslateModule.forRoot({ // ngx-translate
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        },
      }),
      BrowserAnimationsModule // PrimeNG
    ),
  ],
};

navbar.component.ts代码：

import { Component, inject, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { initDrawers, initDropdowns } from 'flowbite';

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [TranslateModule],
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.scss',
})
export class NavbarComponent implements OnInit {
  // Dependencias
  private _sanitizer = inject(DomSanitizer); // Nos permite renderizar SVGs desde TypeScript.

  // Botones del menú desplegable lateral.
  menuItems = [...
  ];

  ngOnInit(): void {
    initDrawers(); // Inicializar menú navbar.
    initDropdowns(); // Inicializar dropdown usuario.
  }
}

search-products.component.ts的代码（我使用p-multiSelect的唯一组件）

import { Component, inject, OnInit, signal } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { NavbarComponent } from '../../../../shared/layout/navbar/navbar.component';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
import { LoadingOverlayComponent } from '../../../../shared/layout/loading-overlay/loading-overlay.component';
import { ProductsService } from '../../services/products.service';
import { MultiSelectModule } from 'primeng/multiselect';

@Component({
  selector: 'app-search-products',
  standalone: true,
  imports: [
    NavbarComponent,
    ReactiveFormsModule,
    TranslateModule,
    InfiniteScrollDirective,
    LoadingOverlayComponent,
    MultiSelectModule,
  ],
  templateUrl: './search-products.component.html',
  styleUrl: './search-products.component.scss'
})
export class SearchProductsComponent implements OnInit {

  materials: any[] = [];  
  
  searchProductsForm!: FormGroup; // Formulario de búsqueda de productos.
  productList = signal<any[]>([]); // Array que almacenará todos los productos que recojamos del endpoint.
  sortOrder: boolean = true; // true = asc | false = desc
  page = 1; // Posición desde la que empezaremos a recoger datos.
  pageSize = 10; // Número de registros por tanda que recogeremos.
  loading = signal(false); // Signal que controla la pantalla de carga.
  isFormValid = signal(false); // Signal que controla si el formulario es válido para la búsqueda.

  // Dependencias
  private _form = inject(FormBuilder);
  private _productsService = inject(ProductsService);

  ngOnInit(): void {
    // Inicialización del formulario de búsqueda.
    this.searchProductsForm = this._form.group({
      productRef: [''],
      catalogRef: [''],
      stockFilter:[''],
      productType:['joyas'],
      selectedMaterials:['']
    });

    this.materials = [
      {name: 'Oro'},
      {name: 'Plata'},
      {name: 'Platino'},
  ];
  }

为什么会出现这种情况？这是因为 Flowbite 和 PrimeNG 如何管理他们的动画？我不能让它们同时工作，我必须删除“app.config.ts”的“BrowserAnimationsModule”才能使导航栏的抽屉和下拉菜单正常工作，并且我必须将其包含到“ p-multiSelect”可以工作（但抽屉/下拉菜单停止工作）。

感谢您的帮助和时间。

Answer 1

当您将

BrowserAnimationsModule

导入应用程序时，它会更改框架处理渲染和动画的方式，这可能会干扰纯 CSS 动画，例如 Flowbite（使用 Tailwind CSS）中的动画。

您可以尝试解决以下一些问题：

• 在不需要 Angular 动画的特定组件或模块中使用

  NoopAnimationsModule

  。这将使 Flowbite 在这些环境中正常运行。
• 分离 Angular 和 Flowbite 动画：仅为特别需要它们的元素或组件保留 Angular 动画，并为其他元素或组件使用 Flowbite。 为此，请从主配置文件中删除

  BrowserAnimationsModule

  ，这样 Angular 就不会处理应用程序中的所有动画。

希望对你有帮助！