Angular无法处理<p>标签吗？

Question

当我将<p>标签添加到组件模板时，Angular 6会无声地失败。 CLI上没有显示错误，但页面呈现为空白。

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

以下是包含<p>标记的模板：

<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>

如果我删除这两组<p>标记，则会呈现无错误。那么<p>标签现在与Angular不兼容吗？或者还有其他事情发生了吗？

Answer 1

根据p标签的MDN文档：

  

如果紧跟p元素，则可以省略结束标记   按元素，或者父元素中没有更多内容   元素和父元素不是元素。

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