有没有办法摆脱隐含的结束标签？ Angular v4 / html

Question

我在component.html文件中运行此代码

<p [class.edit]='true'>
  task-details works!
<div [class.edit]='true'>
  <button>Click to mark complete</button>
</div>
</p>

我在浏览器中打开控制台时出现以下错误

Uncaught Error: Template parse errors:
Unexpected closing tag "p". It may happen when the tag has already been 
closed by another tag.

错误链接到https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags，其中讨论了隐含的结束标记。

为了试图解决这个问题，我删除了

</div>

endtag或

</p> 

ENDTAG。删除任何一个摆脱错误。此外，如果我删除里面的类描述并留下一个没有引用css的标记，它也可以摆脱错误：

<p>
  task-details works!
<div [class.edit]='true'>
  <button>Click to mark complete</button>
</div>
</p>

我的问题是我想要

<p [class.edit]='true'> 

浏览我的另一个标签，这样我就可以在div标签中生成一个边框，边框周围有另一个更大的边框，由我的p标签调用。

那么有没有办法摆脱隐含的结束标记，所以我可以在我的p标签内部使用我的div标签，或者我可以做到这一点的唯一方法是将div标签放入子组件然后调用它它的直接父组件？