Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

542
Vistas
Cómo acceder a la ID de encapsulación única de los componentes en Angular 9

Estoy tratando de encapsular las identificaciones de mis elementos agregando la identificación de la instancia de esta manera:

 <label for="id-{{ unique }}-name"></label> <input id="id-{{ unique }}-name" type="text" formControlName="name">

Anteriormente trabajé con esto: https://stackoverflow.com/a/40140762/12858538 . Pero después de actualizar Angular de 7 a 9, esto parece obsoleto. Estaba pensando en un servicio auxiliar simple, que generaría identificaciones únicas para mi aplicación.

Algo como esto:

 @Injectable() export class UniqueIdService { private counter = 0 constructor() {} public getUniqueId (prefix: string) { const id = ++this.counter return prefix + id } }

inspirado en lodash uniqueid

Pero prefiero usar angulares construidos en ids. Entonces, mi solución actual es extraer la identificación del atributo _nghost de los componentes.

 constructor ( private element: ElementRef, ) { const ngHost = Object.values(this.element.nativeElement.attributes as NamedNodeMap) .find(attr => attr.name.startsWith('_nghost')) .name this.unique = ngHost.substr(ngHost.lastIndexOf('-') + 1) }

Pero no estoy del todo contento con esta solución y estoy buscando un acceso directo a la identificación.

¿Alguien sabe cómo acceder a esto?

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

La ID única en Angular 9 se puede representar como:

 _nghost - par - 2 | | | static APP_ID componentDef.id

Para acceder a componentDef.id puede hacer lo siguiente:

 export class SomeComponent implements OnInit { unique = this.constructor['ɵcmp'].id;

donde ɵcmp es una variable privada NG_COMP_DEF

Ejemplo Ng-run

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda