Question

我想在网页上显示一些角度代码，例如

      import { Pipe, PipeTransform } from '@angular/core';

      @Pipe({name: 'reverseStr'})
      export class ReverseStr implements PipeTransform {
          transform(value: string): string {
          let newStr: string = "";
          for (var i = value.length - 1; i >= 0; i--) {
              newStr += value.charAt(i);
          }
          return newStr;
          }
      }

如果我直接按原样添加（或使用普通的html标签包装），则会破坏应用程序。如何解决？还可以在代码段中添加与语言相关的颜色吗？

Answer 1

您需要“转义”花括号。

示例：

            <code>
              import {{ '{' }} Pipe, PipeTransform {{ '}' }} from '@angular/core';

              @Pipe({{ '{' }}name: 'reverseStr'{{ '}' }})
              export class ReverseStr implements PipeTransform {{ '{' }}
                transform(value: string): string {{ '{' }}
                let newStr: string = "";
                for (var i = value.length - 1; i >= 0; i--) {{ '{' }}
                    newStr += value.charAt(i);
                    {{ '}' }}
                return newStr;
                {{ '}' }}
                {{ '}' }}
            </code>

或者，您可以使用字符代码：

{ = { } =}

代码源：https://ascii.cl/htmlcodes.htm

Answer 2

您希望使用普通的{{ code }}语法来对要显示的变量进行编码。

添加code和pre可以按照您想要的方式对其进行样式设置（或者您可以通过将容器的CSS设置为white-space:pre来通过CSS进行设置）

<div><code><pre>{{code}}</pre></code></div>

如何将代码段添加到Angular HTML模板？

2 个答案: