相关疑难解决方法(0)

我正在尝试创建一个共享的Angular组件库，以在许多不同的Web项目中使用。与共享组件库一起，我试图创建一个Web项目，其中包含并显示所有这些组件以及有关如何使用它们的代码示例。

从与类似问题相关的其他查询中可以看出，为了在<pre>或<code>标签中显示HTML代码在网页中，这些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> …