如何在 Angular 8 应用的 HTML 中显示 Angular 组件的代码示例？

Question

我正在尝试创建一个应用程序来记录我公司的内部可重用组件，但我无法弄清楚如何从我的 Angular 文档应用程序中显示 Angular Typescript 代码。

每当我尝试这样做时，我都会看到以下错误：

Error in @angular/compiler@8.2.14/bundles/compiler.umd.js (2603:21)
Template parse errors:
Invalid ICU message. Missing '}'. ("
export class SliderComponent {}

[ERROR ->]</code>"): ng:///AppModule/AppComponent.html@9:0

我在项目中真正拥有的唯一代码在 app.component.html 文件中，它看起来像这样：


<code>
  @Component({
        selector: 'app-slider-alt',
        templateUrl: './slider-alt.template.html',
        styleUrls: ['./slider.component.scss']
      })
      export class SliderComponent {}

</code>

Stackblitz link

有什么想法吗？

Answer 1

问题是花括号。您可以将它们替换为：

{ => {
} => }

<code>
@Component(&#123;
  selector: 'app-slider-alt',
  templateUrl: './slider-alt.template.html',
  styleUrls: ['./slider.component.scss']
&#125;)
export class SliderComponent &#123;&#125;
</code>

此外，我认为 <pre> 比 <code>

更好看

Stackblitz demo

如何在 Angular 8 应用的 HTML 中显示 Angular 组件的代码示例？

How to show code example of an Angular Component from within an Angular 8 app's HTML?

typescript

angular

angular8