Question

我尝试将组件分解成小块，并遇到语义和类管理问题。

例如：具有三个部分的嵌套结构：发布，发布标题和发布标题。

PublicationComponent：

<article class="publication">
  <app-publication-header></app-publication-header>
</article>

PublicationHeaderComponent：

<header class="publication__header">
  <app-publication-title></app-publication-title>
</header>

PublicationTitleComponent：

<h1 class="publication__title">Publication Title</h1>

结果代码看起来很冗长。

我需要包装标签还是仅需要自定义元素？
在哪里放置类：在自定义元素或包装标签上？
使用类还是封装？
如果不是类，如何根据父属性绑定来管理嵌套组件中的样式？（例如，绑定发布theme属性并适当更改发布标题样式）

我应该使用哪个代码？

产生的代码变体：

<app-publication>
  <article class="publication">

    <app-publication-header>
      <header class="publication__header">

        <app-publication-title>
          <h1 class="publication__title">Publication Title</h1>
        </app-publication-title>

      </header>
    </app-publication-header>

  </article>
</app-publication>

<app-publication class="publication">
  <article>

    <app-publication-header class="publication__header">
      <header>

        <app-publication-title class="publication__title">
          <h1>Publication Title</h1>
        </app-publication-title>

      </header>
    </app-publication-header>

  </article>
</app-publication>

<app-publication class="publication">
  <app-publication-header class="publication__header">
    <app-publication-title class="publication__title">Publication Title</app-publication-title>
  </app-publication-header>
</app-publication>

<app-publication>
  <app-publication-header>
    <app-publication-title>Publication Title</app-publication-title>
  </app-publication-header>
</app-publication>

Answer 1

我强烈建议您以易于阅读和可操作的方式编写代码

您必须确保自己不会污染html。

您应该始终基于组件的结构来使您的代码松散耦合。以便在必要时重复使用。

所有类和样式应为component专有。

要使用嵌套样式，请使用decorator模式，以使component保持可配置状态。

我建议您使用如下代码，

<app-publication>
  <app-publication-header>
    <app-publication-title>Publication Title</app-publication-title>
  </app-publication-header>
</app-publication>

Answer 2

编辑以顶部链接解决方案 - 参见 https://medium.com/javascript-everyday/when-to-use-an-attribute-selector-for-angular-components-7e788ba1bfe7

虽然我完全理解 Kuldeeps 的建议并同意其中的许多建议，但我不同意他的最终结果。我也遇到了你的问题。我想用良好的语义标记编写干净的 html5，并且没有额外的标签。您的代码应该能够生成...

<article class="publication">
  <header>
    <h1>Publication Title</h1>
  </header>
</article>

（尽管您对标题的使用 - 我认为 - 不正确 - 它是针对页面的，而不是文章 - 但我不是专家）我不知道有什么方法可以做到这一点 - 我在寻找相同问题的答案时发现了你的问题。我想知道为组件使用属性映射是否可能允许它，所以你可以使用...

<article app-publication>

和

<header app-publication-header>

并把它们当作组件，就像你用过一样

<app-publication>

和

<app-publication-header>

看起来这是通过将选择器设置为基于属性来完成的。所以代替

selector: "app-publication",

寻找

<app-publication>

你使用

selector: "[app-publication]",

寻找

<{anytag} app-publication>

我要去试试看你能不能做

selector: "article [app-publication]",

将其限制为仅适用于文章。

如果您找到更好的解决方案，请回复 - 您正在尝试正确使用 html5，因此如果角度限制了您，请不要犹豫。

角度自定义元素和语义标签

我应该使用哪个代码？

2 个答案: