Angular 2：为什么不能使用空元素标签？

Question

为什么在ng2模板中我不能使用空元素标签。这与templateUrl中的文件相同。

<p></p>    // OK

<p/>       // NOK (endless "Loading...")

???

cheers, chris

- chris01

Answer 1

p标签在html中不是一个非闭合元素。非闭合元素例如img，input或br。如果你没有关闭它 - 加载将会无休止地显示，因为编译器会抛出模板解析错误：

Uncaught Error: Template parse errors:
Only void and foreign elements can be self closed "p" ("
</p>
[ERROR ->]<p/>

- kind user

---

我没有看到那个错误。但编译器像往常一样打印“构建成功”。我用“ng serve”开始了。但是它一直显示“加载中...”。我需要设置什么吗？ - chris01

@chris01 打开控制台，你就会看到它。 - kind user

我明白了，它在浏览器的JS控制台中，谢谢！ - chris01

Answer 2

Angular2只允许在组件模板中使用有效的HTML5。

另请参见https://dev59.com/JnA65IYBdhLWcg3w7DX8#3558200。

在HTML5中，<foo />的含义[取决于元素的类型][1]。

对于被指定为void elements的HTML元素，结束标签是被禁止的。在开始标签结尾处使用斜杠是允许的，但没有实际意义。这只是一种语法糖，方便那些沉迷于XML的人（和语法高亮器）。

对于其他HTML元素，斜杠是一个错误，但错误恢复会导致浏览器忽略它并将标签视为常规开始标签。这通常会导致缺少结束标签，从而使后续元素成为子元素而不是同级元素。

外部元素（从诸如SVG之类的XML应用程序导入）将其视为自闭合语法。

[1]: https://www.w3.org/TR/html5/syntax.html#start-tags

- Günter Zöchbauer