时间戳

首页 > 解决方案 > Angular 自定义元素和语义标签

angular - Angular 自定义元素和语义标签

问题描述

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

例如：包含三个组件的嵌套结构：publication、publication-header 和 publication-title。

发布组件：

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

出版物标头组件：

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

发布标题组件：

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

生成的代码看起来很冗长。

  1. 我需要包装标签还是只需要自定义元素？
  2. 在哪里放置类：在自定义元素或包装标签上？
  3. 使用类还是封装？
  4. 如果不是类，如何根据父属性绑定管理嵌套组件中的样式？（例如，绑定发布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>

标签： angular

解决方案

编辑以顶部链接解决方案 - 请参阅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，因此如果角度限制您，请不要推迟。

推荐阅读