1

Tengo lo siguiente en typescript:

element.texto = `${element.nombre_completo} ha ${txt} una cita ${element.status === 5 ? `de`: 'a'} las ${moment(element.hora, 'HH:mm:ss').format(this.auth.formatohorario)} el día ${moment(element.fecha).format('LL')}`

sin embargo quiero saber como podria asignarle una clase o un estilo a ${element.nombre_completo}, en scss tengo la siguiente clase:

.name{font-weight: 600;}

¿Como podria asignarle la clase .name dentro de typescript?

2 respuestas 2

0

Creo que simplemente puedes encapsular la frase en un div o un span

const edad = 1000;
document.getElementById('extra').innerHTML = `<div class="name"> Tengo ${edad} años</div>`
.name {
    font-weight: 600;
}
<div>Edad: </div>
<div id="extra"></div>

0

Hay muchas opciones. Cual escoger depende de muchas cosas, como el tamaño de tu proyecto, el manejo de CSS del proyecto, y claro tu preferencia personal.

Usando solo la información que haz dado arriba es difícil dar una respuesta completa. Podrías agregar: contexto del projecto, estas usando algun framwork (react, angular), las líneas de codigo que haz mostrado están en un script, o son parte de algun componente de algun framework? etc etc.

Suena a que talves confundes el uso de typescript como lenguaje/herramienta y su relación con "páginas web". Por ejemplo, asumo que ese element.texto en realidad es una frase que será vista en la web, y como tal, está en alguna ubicación de tu HTML. Más específicamente, dentro de algun <div> o similar. Entonces para darle formato simplemente asignas la clase correspondiente a este, por ejemplo:

<div class=name>Hola mundo.</div>

y listo.

También recomendaría organizar mejor ese string tan largo. Esto depende si estás dentro de un TSX o estás escribiendo algún código general en typescript (no especificaste). Pero en general parece que intentas hacer una mezcla de "string interpolation" y TSX. Quieres sustituir variables y ejecutar lógica en una sola línea muy larga, esto no es posible. Debes separar la lógica element.status === 5 ? 'de': 'a' y las sustituciones ${element.nombre_completo} y despues combinarlas. Por ejemplo:

let gramatica = element.status === 5 ? 'de': 'a';
let hora = moment(element.hora, 'HH:mm:ss').format(this.auth.formatohorario);
let fecha = moment(element.fecha).format('LL');
let frase = `${element.nombre_completo} ha ${txt} una cita ${gramatica} las ${hora} el día ${fecha}`
element.texto = frase

En este ejemplo hora y fecha sí podrían estar dentro de "frase" directamente, pero pienso esto es más legible. Lo que importa es que al final tienes un solo string "frase" que puedes usar con confianza.

Como último punto, como mencioné el estilo de código inicial sugiere que intentabas usar JSX dentro de algún component de react por ejemplo. Si eso fuera el caso podrías en teoría meter todo junto de la siguiente manera:

const miElemento = <div className='name'> 
  {element.nombre_completo} ha ${txt} una cita 
  {element.status === 5 ? 'de': 'a'} las 
  {moment(element.hora, 'HH:mm:ss').format(this.auth.formatohorario)} el día 
  {moment(element.fecha).format('LL')}
</div>;

Esto funciona, pero opino que la opción anterior es más fácil de leer.

Si das más datos con gusto actualizo las opciones.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.