html - Angular 元素应该被视为 block 还是包装器

Question

当使用元素指令时，我看到 Angular 元素指令以两种方式使用:

<强>1。作为 block 级组件

元素的样式为 display:block，是组件，它的子元素是组件的子元素，所以元素本身就是组件。

指令的使用:

<example class="Example"></example>

指令的 html:

<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>

<强>2。作为组件的内联包装器

该元素保留为 display:inline 并有效地充当组件本身的不可见包装器:

指令的使用:

<example></example>

指令的 html:

<div class="Example">
  <header class="Example-header"></header>
  <img class="Example-image">
  <footer class="Example-footer"></footer>
</div>

显然每个都有优点和缺点，例如额外的标记、由于内联元素而丢失布局上下文等，但是是正确的方法吗？还是 Angular 的另一种变幻莫测的方法？

Answer 1

我很惊讶没有人回应，但创建自定义指令背后的想法是能够创建可重复使用的代码片段，以实现您网站上的特定功能。

但是，此功能并不关心您将要使用的样式。您当然可以在 Angular 中有条件地更改类和样式，但处理框架时的核心组件是数据。

话虽这么说，但正如您在问题中加粗的那样，没有“正确的方法”。制定符合您的需求和网站风格的指令。