Angular中如何跨多路由组件模板搜索文本并保持单一数据源

核心目标是在保留组件模板全部Angular能力（routerLink、共享组件、指令绑定等）的前提下，彻底消除双数据源维护问题，同时不引入额外运行时性能损耗。

最优方案：构建期自动生成搜索索引 #

这是生产环境下最稳妥的实现方式，全程无侵入、无额外运行时开销，模板是唯一的内容数据源：

• 利用Angular构建流程的扩展能力（Angular 16+ 基于esbuild的构建可写简单插件，老版本可自定义Angular CLI构建器，或者直接写Node脚本挂在npm run prebuild钩子上执行），在代码构建阶段自动扫描所有需要检索的组件
• 扫描逻辑可以直接读取路由配置文件，识别所有标记为可检索的路由项：只需要在路由的data字段加一个searchable: true的标记即可，不需要修改组件本身的业务代码
• 拿到对应组件的templateUrl路径后，读取原始HTML模板文件，解析时剔除所有Angular指令属性、组件标签、事件绑定等非内容代码，只提取纯文本内容，和路由路径、页面标题等元信息绑定，生成一份结构化的JSON格式搜索索引
• 构建时把这份索引作为静态资源打包，应用启动后只需要加载这份索引文件，所有搜索操作直接在内存里的索引数据上完成，完全不需要运行时实例化未访问的路由组件

• 该方案的核心优势：模板文件始终是唯一的内容来源，修改页面内容时只需要改模板，构建流程会自动同步更新搜索索引，彻底消除双写维护成本；同时不会破坏组件的任何功能特性，所有Angular语法、共享组件、路由绑定都可以正常使用；运行时没有额外性能开销，哪怕有上百个检索页面也不会影响首屏加载速度。

实现注意事项 #

• 不要尝试在运行时导入原始组件模板：Angular生产构建会把所有模板编译成原生JS渲染函数，原始HTML文件不会被打包到产物中，强行用raw-loader导入原始模板会破坏Angular的正常编译流程，还会无端增大包体积
• 不要采用运行时收集组件内容的方案：不管是通过服务让组件初始化时上传文本，还是提前实例化所有可检索组件，都会导致严重的性能问题，实际测试已经验证过巨型组件初始化方案的性能缺陷，这类方案完全不适合多路由场景
• 不要把页面正文硬编码在TS配置对象中：这种方式会让模板完全失去Angular的动态能力，routerLink、图片弹窗这类交互组件、自定义指令都无法正常使用，属于走回头路

路由配置适配示例 #

现有路由结构只需要加少量data标记即可被扫描脚本识别，不需要改动原有组件逻辑：

const routes: Routes = [
    {
        path: '',
        component: UserGuideComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'introduction',
                component: IntroductionComponent,
                data: { searchable: true, pageTitle: '产品介绍' }
            },
            {
                path: 'introduction/quick-links',
                component: QuickLinksComponent,
                data: { searchable: true, pageTitle: '快捷入口' }
            },
            {
                path: 'build-survey',
                component: BuildSurveyComponent,
                data: { searchable: true, pageTitle: '创建问卷' }
            },
            {
                path: 'build-survey/content',
                component: ContentComponent,
                data: { searchable: true, pageTitle: '内容编辑' }
            },
            // 后续新增页面只需要加data标记，脚本会自动识别处理
        ]
    }
];

扫描脚本读取路由配置后，可以通过Angular编译器提供的静态反射能力拿到每个组件对应的模板文件路径，自动完成文本提取和索引生成，全程不需要手动维护任何内容副本。

内容的提问来源于stack exchange，提问作者Jake Zeitz