在 Angular2 TypeScript 中注释（出）代码

Posted 2023-02-21

【中文标题】在 Angular2 TypeScript 中注释（出）代码

【英文标题】：Commenting (out) code in Angular2 TypeScript

【发布时间】：2016-07-23 15:31:49

【问题描述】：

我有以下 Angular2 TypeScript 代码，其中一部分按照 javascript 约定被注释掉：

@Component(
    selector: 'my-app',
    template:
    `<h1>title</h1>
    <h2>lene.name</h2>
    <div><label>id: </label>lene.id</div>
    /*<div>
       <label>name: </label>
       <input [(ngModel)]="lene.name" placeholder="name">
    </div>*/`
    <div><label>description: </label>lene.description</div>
)

但是，一旦 TypeScript 编译为 Javascript，我的 Web 浏览器就会得到以下输出：

我搜索了 API 文档，但找不到指定此非常基本功能的语法的条目。有人知道你是如何在 TypeScript 中做多行 cmets 的吗？

【参考方案1】：

/* */ 是打字稿注释分隔符

它们在字符串文字中不起作用。

您可以使用 html 注释语法代替 <!-- -->。

@Component(
    selector: 'my-app',
    template:
    `<h1>title</h1>
    <h2>lene.name</h2>
    <div><label>id: </label>lene.id</div>
    <!-- <div>
       <label>name: </label>
       <input [(ngModel)]="lene.name" placeholder="name">
    </div> -->'
    <div><label>description: </label>lene.description</div>
)

以这种方式注释掉的 HTML 仍会添加到 DOM，但仅作为注释。

【讨论】：

基本上，因为模板部分被解析为 HTML 而不是 Javascript，所以我应该对 cme​​ts 使用 HTML 语法，对吧？还是比这更复杂？无论哪种方式，解决方案都有效:)。

从 TypeScript 的角度来看，`<h1 ... /div>` 是一个字符串。在字符串中的 cmets（实际上几乎除了字符串插值之外的所有内容）都会被忽略。当使用 HTML 注释语法时，字符串被转发到浏览器（包括<!-- -->），然后浏览器将这部分字符串解释为注释。

关于评论分隔的有趣信息。您是否知道示例或 API 文档参考，以便我查看？

TypeScript 注释语法基本上是 ES5 comment syntax 并添加了一些附加内容，例如“源文件依赖关系”***.com/questions/23072286/…。反引号在这里解释developer.mozilla.org/de/docs/Web/JavaScript/Reference/…

@GünterZöchbauer 我正在处理一个非常简单的 Angular2 项目，并且在我的模板中有一个 HTML 注释，并且该注释没有被添加到 DOM 中。代码运行，但输出中没有注释。

【参考方案2】：

如果您在模板中，请使用 HTML 注释 <!-- ... -->:

@Component(
  selector: 'my-app',
  template: `
    <h1>title</h1>
    <h2>lene.name</h2>
    <div><label>id: </label>lene.id</div>
    <!-- div>
      <label>name: </label>
      <input [(ngModel)]="lene.name" placeholder="name">
    </div-->
    <div><label>description: </label>lene.description</div>
  `
)

【参考方案3】：

但是，它似乎不起作用，因为它只隐藏了 HTML，同时仍在尝试执行注释部分中的打字稿代码。