Me gustaría usar la interfaz de usuario semántica en mi aplicación Angular2. El problema es que no puedo encontrar una configuración de enrutador que cambie el nombre predeterminado de la clase "router-link-active". Necesito que se llame simplemente "activo" para que los menús se muestren correctamente.

Según tengo entendido, esa configuración no existe. Lo he visto en Vue.JS, así que espero que esté allí también. ¿Es una buena idea pedirles a los desarrolladores que solucionen esto?

Entonces. Necesitamos escribir una directiva personalizada que agregue la clase "activa" a todos los elementos DOM con la clase "router-link-active", pero aquí también tengo algunos problemas.

Hay unpregunta similar Pero la respuesta es demasiado complicada y no funcionó para mí. Así que leí algo de documentación y decidí hacer algo mejor como esto:

commons.ts:

@Directive({
    selector: '.router-link-active',
    host: {'[class.active]': 'trueConst'} //just 'true' could also work I think...
})
export class ActiveRouterLinkClass {
    trueConst: boolean = true; //...if 'true' works we don't need this
}

Luego importé ActiveRouterLinkClass en mimain.component.ts y lo agregó a la lista de directivas del componente. Desafortunadamente, ahora tengo este error:"EXCEPCIÓN: valor de directiva inesperado 'indefinido' en la vista del componente 'Principal'". ¡Por favor, explique lo que hice mal!