аюсь создать библиотеку общих компонентов Angular для использования в различных веб-проектах. Наряду с библиотекой общих компонентов я пытаюсь создать веб-проект, который содержит и отображает все эти компоненты и примеры кода относительно их использования.

Как видно из других запросов, связанных с аналогичным вопросом, для отображения HTML-кода на веб-странице в<pre> или же<code> теги, некоторые аспекты этих фрагментов HTML должны иметь символы в кодировке HTML (т.е.> должно быть>, < должно быть<). Необходимость вносить эти изменения вручную из исходного кода может быть довольно обременительной и утомительной.

Я хотел бы найти способ прочитать шаблон HTML для данного компонента, сделать несколько необходимых замен текста и затем установить это значение для свойства, которое будет отображаться в представлении. Я видел другие подобные вопросы SO, которые имеют другой и недостаточный ответ, такой какэто.

Если бы у меня былfoo.component.ts следующее:

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 {}

Я хочу создатьdisplay-foo.component.ts с чем-то следующим:

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;');
  }
}

По сути, это поместило бы шаблон в пользовательский интерфейс для следующего разработчика, чтобы увидеть и понять, как использовать, а также фактический визуализированный элемент этого типа компонента, а также отображать, как компонент будет выглядеть при использовании в реальном приложении.

ЧастьDisplayFooComponent что я не могу понять, как работает эта линияthis.encodedExampleHtml = new FooComponent().template.replace('<', '&lt;').replace('>', '&gt;'); Примите это как псевдокод для того, что я хотел бы сделать, потому что объект компонента Angular не имеет свойства шаблона и, насколько я вижу, не имеет свойства, предоставляющего шаблон для этого компонента.

Есть ли способ использовать платформу Angular для получения HTML-шаблона для компонента? Опять же, я не хочу заменять интерполированный контент с выражениями, но фактический необработанный HTML-шаблон, связанный с элементом либо декораторомtemplate собственность или ееtemplateUrl свойство?