Angular 12中能否使用Flowbite等Tailwind CSS UI组件库？

1. 版本支持情况 #

• Tailwind UI：本身是预构建的组件代码片段，没有官方Angular版本，只要你的Tailwind CSS配置正常，Angular 12可以直接复用它的HTML、样式代码，但是交互逻辑需要自己用Angular语法实现
• Flowbite：原生的Flowbite基础库可以兼容Angular 12，但是直接按照官方原生HTML的接入方式会出现交互失效的问题，需要调整接入方式

2. Flowbite交互失效的根本原因 #

Flowbite默认的原生JS初始化逻辑是在页面DOM加载完成后一次性扫描所有带Flowbite属性的元素，绑定交互事件。但Angular是单页应用，组件DOM是动态渲染、按需挂载的，Flowbite初始化的时候你用到的下拉菜单等组件的DOM还没生成，自然不会绑定对应的事件，也不会抛出报错。

3. 修复方案 #

你可以选择两种方案解决：

方案1：使用官方适配的Flowbite Angular库 #

直接安装适配Angular的Flowbite组件包，所有组件都是封装好的Angular原生组件，不需要自己处理事件绑定，适配Angular 12+版本。安装和配置步骤如下：

• 第一步安装依赖：npm install flowbite-angular
• 第二步在Angular的app.module.ts中引入需要用到的组件模块，比如下拉菜单就引入DropdownModule
• 第三步直接在组件模板中使用封装好的Flowbite Angular组件即可

方案2：手动触发Flowbite初始化 #

如果不想用封装好的组件，要继续用原生的Flowbite代码片段，可以在Angular组件的ngAfterViewInit生命周期钩子中手动调用Flowbite的初始化方法，确保组件DOM渲染完成后再绑定事件：

import { Component, AfterViewInit } from '@angular/core';
import { initFlowbite } from 'flowbite';

@Component({
  // 你的组件配置
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    initFlowbite();
  }
}

如果组件会频繁销毁重建，也可以在每次组件渲染完成后单独初始化对应组件的实例，避免重复绑定事件。

内容的提问来源于stack exchange，提问作者itsik goldberg