如何从 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