Tengo varios componentes en diferentes rutas que en su mayoría tienen plantillas estáticas. Me gustaría buscar esas plantillas para cualquier cadena y devolver el contenido de texto coincidente.

Puedo hacer esto copiando manualmente el contenido de texto de cada plantilla y almacenándolo en un objeto. Esto crea 2 fuentes de verdad para el contenido de estas páginas. Lo que significa que cada actualización de uno también debe realizarse en el otro.

¿Hay alguna manera de que pueda diseñar esto para que haya una única fuente de verdad?

Cosas que he probado

1. Mantengo todo el html en el objeto de datos, pero luego pierdo toda la funcionalidad de los componentes. Sin routerLink , sin componentes compartidos (utilizando un componente de diálogo para ampliar imágenes), etc.
2. Duplicar contenido en el objeto de datos
3. Manteniendo todo html en las plantillas, pero entonces, ¿cómo podría buscarlo?

Ideas potenciales

• ¿Importar plantillas de componentes al constructor?
  • Luego analícelos en ngOninit para crear el objeto.
  • No estoy seguro de que esto sea posible
• Almacenar el contenido del texto de la plantilla en un servicio
  • Cada componente enviaría su contenido de texto al servicio en ngOninit o ngAfterViewInit
  • Pero entonces, ¿cómo inicializaría todos los componentes si están en rutas diferentes?
• Tenga un componente de búsqueda gigante que inicialice todos los componentes de búsqueda
  • Parece que tendría un gran impacto negativo en el rendimiento
  • Editar : acabo de probar esto y sí, hace que la aplicación sea muy lenta

Rutas de ejemplo

 const routes: Routes = [ { path: '', component: UserGuideComponent, canActivate: [AuthGuard], children: [ { path: 'introduction', component: IntroductionComponent }, { path: 'introduction/quick-links', component: QuickLinksComponent }, { path: 'build-survey', component: BuildSurveyComponent }, { path: 'build-survey/content', component: ContentComponent }, ... // there will be a lot more pages ] } ];