Я пытаюсь создать библиотеку общих компонентов 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('<', '<').replace('>', '>');
}
}
По сути, это поместит шаблон в пользовательский интерфейс, чтобы следующий разработчик мог увидеть и понять, как использовать, а также фактический визуализированный элемент этого типа компонента, а также отображение того, как компонент будет выглядеть при использовании в реальном приложении.
Часть DisplayFooComponent, которую я не могу понять, как работать, - это эта строка this.encodedExampleHtml = new FooComponent().template.replace('<', '<').replace('>', '>'); Возьмите это как псевдокод для того, что я хотел бы сделать, потому что объект компонента Angular не имеет свойства шаблона и, насколько я могу видеть, нет свойства, которое выставляет шаблон для этого компонента.
Есть ли способ использовать фреймворк Angular для получения шаблона HTML для компонента? Опять же, я хочу заменить не интерполированное содержимое с выражениями, а реальный необработанный HTML-шаблон, связанный с элементом. либо по свойству декоратора template, либо по его свойству templateUrl?
