Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

252
Visualizações
¿Cómo mostrar / representar el código fuente de un archivo Typescript en una página HTML?

Queremos mostrar un ejemplo de código fuente en una galería de muestras.

Tenemos archivos mecanografiados, html y HTML que queremos mostrar tal como se hace en las páginas de muestras de componentes de angular.io.

¿Sabe cómo obtener el código fuente de la ruta de un archivo mecanografiado que ya está en nuestro proyecto y renderizarlo?

para angular.io usan este componente https://github.com/angular/angular/blob/main/aio/src/app/custom-elements/code/code-example.component.ts pero con compilación y renderizado complejos , demasiado complejo... Eric

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Los ejemplos de código no suelen ser código de su propia base de código.

Son más bien ejemplos de qué escribir para usar una biblioteca (o algo) que haya creado.

Por lo tanto, es una especie de obviedad: no cree un archivo .ts y cárguelo como texto, sino más bien:

  • escriba el contenido de TS directamente en su HTML
  • declarar una cadena que contiene el código TS

O, si desea tener autocompletado en el contenido de TS

  • cree un archivo TS en la carpeta de assets para que no se construya y cárguelo a través de HttpClient
about 4 years ago · Juan Pablo Isaza Relatório

0

[...] cómo obtener el código fuente de la ruta de un archivo mecanografiado que ya está en nuestro proyecto y renderizarlo?

Puede usar la Fetch API que recuperará de forma asíncrona un archivo de su servidor.

NB El uso de la Fetch API comienza con dos operaciones asincrónicas:

  1. una operación asíncrona para obtener la respuesta del archivo
  2. una operación asincrónica para extraer el contenido del archivo de la respuesta del archivo

Ejemplo:

 const getMyTSFile = async () => { // FETCH THE FILE RESPONSE const myTSFile = await fetch('/path/to/my/typescript-file.ts'); // EXTRACT THE CONTENT FROM THE FILE (AS TEXT) const myTSFileText = await myTSFile.text(); // CREATE A NEW <CODE> ELEMENT const myTSFileElement = document.createElement('code'); // POPULATE THE THE <CODE> ELEMENT WITH THE FILE TEXT CONTENT myTSFileElement.textContent = myTSFileText; // APPEND THE <CODE> ELEMENT TO THE DOCUMENT BODY document.body.append(myTSFileElement); } getMyTSFile();

Otras lecturas:

  • Usando Obtener por MDN
  • Obtener conceptos básicos por MDN
  • Obtener API por MDN
  • buscar () por MDN
about 4 years ago · Juan Pablo Isaza Relatório

0

Inicialmente publiqué una pregunta aquí:

¿Cómo reemplazar raw-loader al migrar a Angular 12?

Incluimos realmente el código fuente del código base con una aplicación Angular 11 como esta:

 html: require(!!raw-loader!./${files}.component.html)

o

 ts: require(!!raw-loader!./${files}.component)

pero raw-loader desaparece cuando migramos a Angular 12. Y probé con ?raw que funciona para el archivo html:

 html: require(./${files}.component.html?raw)

y no para el archivo mecanografiado:

 ts: require(./${files}.component?raw)

la !! que evita que los cargadores no funcionen.

algunas ideas ?

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda