如何向 Angular 模板添加注释（对于开发人员，而不是在输出 HTML 中）？

Question

我习惯了更流行的“mustache”样式模板，我可以在其中为我的同事添加评论：

{# The following code looks a bit odd, but here's why... #}

这些评论显然不会出现在输出中 - 所以用户看不到它们。 如何在 Angular 中做类似的事情？

Answer 1

Angular 没有内置的模板注释支持。但是，您可以像这样创建一个注释指令来支持它。

app.directive('templateComment', function () {
    return {
        restrict: 'E',
        compile: function (tElement, attrs) {
            tElement.remove();
        }
    };
});

标记将是：

<template-comment>Put your comment here.</template-comment>

或者，您可以使用标准的 html 注释，然后在部署之前将它们从生产代码中删除。

考虑这个 grunt 任务，如果你想支持块评论 - https://github.com/philipwalton/grunt-strip-code指定一个开始评论和一个结束评论，你的评论块将被剥离出生产代码，假设您将此任务添加到部署目标。 如果您不使用 Grunt，请将其用作构建过程的模型。 ....

Answer 2

我意识到这个问题已经过去 7 年多了，但它是“角度模板评论”的顶级搜索结果之一，所以我们开始......

由于似乎仍然没有对（非 html）注释的模板语法支持，我发现最简单的方法是滥用对嵌入表达式中的一行 js 注释的支持。 像这样：

{{ '' // my comment }}

空字符串文字 - 这使得它比现在更难看 - 是必要的，因为如果没有它，角度编译器会发出“类型错误中的错误：无法读取未定义的属性“访问”，至少在 9.0.0 版本中我在。

Yay 2021 年的 Web 开发！

Answer 3

您可以对没有特殊符号的注释使用正常语法，例如<!-- Order verification, and authorization --> ，然后您可以缩小 html (grunt + htmlmin)

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true,
          removeComments: true,
          ignoreCustomComments: [ /[<>\:\[\]\#]+/ ]

        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/**/*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    },

Answer 4

我已经习惯了比较流行的“胡子”样式模板，可以在其中为同事添加评论：

{# The following code looks a bit odd, but here's why... #}

这些注释显然不会出现在输出中-因此用户看不到它们。 如何在Angular中做类似的事情？