angular p 元素作为模板内的根元素

Question

我正在尝试学习 Angular 的介绍性 "Tour Of Heroes" 教程。在“Show The Hero Object”部分，您应该将 heroes.component.html 模板的内容从

更改为

{{hero}}

到

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

以上对我有用，但最初我做了一个小偏差，模板内容被段落 HTML 元素包围

像这样：

<p>{{hero}}</p>

问题是，虽然上面的方法曾经有效，但当 hero 是一个简单的 String 对象时，将模板更改为以下内容不会产生任何输出。 IE。检查源代码我只看到空的 app-root 元素。

<p>
    <h2>{{hero.name}} Details</h2>
    <div><span>id: </span>{{hero.id}}</div>
    <div><span>name: </span>{{hero.name}}</div>
</p>

有什么问题吗？嗯，终于我发现了错误，但愿意接受评论。谢谢。

Answer 1

嗯，好的，我只是发布这个并保留它以备将来参考。与 Angular 无关。从来没有意识到我不被允许这样做..

我忽略了 javascript 控制台中的错误。它是这样的：

Uncaught Error: Template parse errors: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

搜索 THAT 我发现 Angular，事实上整个 HTML 规范不喜欢带有非文本子元素的 P 标签 - 据我了解，它是应该用于立即格式化的标记，如 B，而不是用于构建结构或布局。关于这个问题有广泛的讨论 here。

angular p 元素作为模板内的根元素

angular p-element as root element inside template

html

angular-template

custom-element

angular