如何將代碼片段添加到 Angular html 模板？

Question

我想在 web 頁面上顯示一些 angular 代碼，例如

      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 將容器的 CSS 設置為具有white-space:pre來執行相同的操作）

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