Angular 不能处理 标签吗？ [复制]答案

【问题标题】：Is Angular incapable of handling tags? [duplicate]Angular 不能处理 标签吗？ [复制]
【发布时间】：2018-05-11 20:11:45
【问题描述】：

当我将 标记添加到组件模板时，Angular 6 静默失败。 CLI 上未显示错误，但页面呈现空白。

幸运的是 Chrome 在控制台中显示错误：Unexpected closing tag "p". It may happen when the tag has already been closed by another tag.

这是带有 标签的模板：

<div id="SideNavMenu" class="sideNav">
  <p>
    <span id="CategoryListCaret">&#9658;</span>
    <a href="#" id="CategoryListHeader" class="sideNav__header sideNav__header--closed">Categories</a>
    <ul>
      <li *ngFor="let itemtype of itemtypes">
        {{ itemtype.name }}
      </li>
    </ul>
  </p>
  <p>
    <span id="TopicListCaret">&#9658;</span>
    <a href="#" id="TopicListHeader" class="sideNav__header sideNav__header--closed">Topics</a>
    <ul>
        <li *ngFor="let keyword of keywords">
            {{ keyword.name }}
        </li>
    </ul>
  </p>
</div>

如果我删除了两组  标记，它将呈现没有错误。那么 标签现在与 Angular 不兼容了吗？还是发生了其他事情？

【问题讨论】：

您是否可以在 HTML 5 中将 ul 放入 p 元素中？
这不是错误@Igor 在这里是正确的。但我同意错误应该更具描述性
不，你是不允许的：stackoverflow.com/a/5681796/8493981
嗯。今天学到了……p标签里只允许这些元素developer.mozilla.org/en-US/docs/Web/Guide/HTML/…
@Igor 我很好奇为什么当我在静态地制作这个原型时 Chrome 没有发出任何抱怨，但是当它被放入一个 Angular 组件时一切都崩溃了？

标签： angular

【解决方案1】：

根据 p 标签的 MDN 文档：

如果紧跟 p 元素，则可以省略结束标记通过一个元素，或者如果父项中没有更多内容元素且父元素不是元素。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

【讨论】：