Estoy tratando de crear una biblioteca de componentes angulares compartidos para usar en varios proyectos web diferentes. Junto con la biblioteca de componentes compartidos, estoy tratando de crear un proyecto web que contenga y muestre todos esos componentes y ejemplos de código sobre cómo usarlos.

Como se ve en otras consultas relacionadas con una pregunta similar, para mostrar el código HTML en una página web en<pre> o<code> etiquetas, ciertos aspectos de esos fragmentos de HTML deben tener caracteres codificados en HTML (es decir.> necesita ser>, < necesita ser<) La necesidad de hacer estos cambios a mano desde el código fuente puede ser bastante onerosa y tediosa.

Me gustaría encontrar una manera de poder leer la plantilla HTML para un componente dado, hacer los pocos reemplazos de texto necesarios y luego establecer ese valor en una propiedad que se mostrará en la vista. He visto otras preguntas SO similares que tienen una respuesta diferente e insuficiente, comoesta.

Si tengofoo.component.ts como sigue:

import { Component } from '@angular/core';

@Component({
    selector: 'foo',
    template: `
        <div class="foo">
            <div class="content">
                <ng-content select="[top-content]"></ng-content>
            </div>
            <div class="extra content">
                <ng-content select="[bottom-content]"></ng-content>
            </div>
        </div>
    `
})
export class FooComponent {}

Quiero crear undisplay-foo.component.ts con algo de la siguiente manera:

import { Component } from '@angular/core';
import { FooComponent } from './foo.component';

@Component({
    selector: 'display-foo',
    template: `
        <pre class="example-code">
          <code>
            {{encodedExampleHtml}}
          </code>
        </pre>
        <foo>
          <div top-content>TOP</div>
          <div bottom-content>BOTTOM</div>
        </foo>
    `
})
export class DisplayFooComponent {
  encodedExampleHtml: string;

  constructor() {
    this.encodedExampleHtml = new FooComponent().template.replace('<', '&lt;').replace('>', '&gt;');
  }
}

En esencia, esto pondría la plantilla en la interfaz de usuario para que el próximo desarrollador vea y comprenda cómo utilizar, así como un elemento renderizado real de ese tipo de componente, así como mostrar cómo se vería el componente cuando se usa en una aplicación real.

La parte de laDisplayFooComponent que no puedo entender cómo trabajar es esta líneathis.encodedExampleHtml = new FooComponent().template.replace('<', '&lt;').replace('>', '&gt;'); Tómelo como pseudocódigo para lo que me gustaría hacer porque un objeto componente angular no tiene propiedad de plantilla y, por lo que puedo ver, no hay ninguna propiedad que exponga la plantilla para ese componente.

¿Hay alguna manera de utilizar el marco angular para obtener la plantilla HTML para un componente? Nuevamente, no quiero que se reemplace el contenido interpolado con expresiones, sino la plantilla HTML sin procesar real que está asociada con un elemento, ya sea por el decoradortemplate propiedad o sutemplateUrl ¿propiedad?