如何向Angular模板添加注释(针对开发人员,而不是输出HTML)？

Question

我已经习惯了更受欢迎的'胡须'样式模板,我可以在其中为同事添加评论:

{# 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注释,然后在部署之前将它们从生产代码中删除.

考虑这个笨拙的任务,如果你想支持块注释 - 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 %>'
        }]
      }
    },