为啥 Angular 坚持为组件自定义前缀？

Posted 2023-03-13

【中文标题】为啥 Angular 坚持为组件自定义前缀？

【英文标题】：Why does Angular insist on custom prefixes for components?为什么 Angular 坚持为组件自定义前缀？

【发布时间】：2022-01-18 00:04:14

【问题描述】：

我指的是 https://angular.io/guide/styleguide#02-07 和 linter 对 kebab-case 选择器的坚持。

我想在app.component.html 中拥有的是：

<header aria-label="some useful text"></header>
<article class="loading" *ngIf="loading" id="main_content" aria-label="main">
  <mat-spinner></mat-spinner>
</article>
<router-outlet *ngIf="!loading"  aria-label="routing tag"></router-outlet>
<footer aria-label="other useful text"></footer>

....在各个组件中定义了我的页眉和页脚片段

相反，我要做的是拥有：

<myapp-header aria-label="heading"></myapp-header>
<article class="loading" *ngIf="loading" id="main_content" aria-label="main">
  <mat-spinner></mat-spinner>
</article>
<router-outlet *ngIf="!loading"  aria-label="routing tag"></router-outlet>
<myapp-footer aria-label="footing"></myapp-footer>

...然后在它们各自的组件中定义实际的<header aria...>....</header> 和<footer aria...>...</footer>。

这给了我一个次优的可访问性树 - text container 元素包含 landmark 元素：

<myapp-header _ngcontent-jeq-c37="" aria-label="heading" _nghost-jeq-c35="">
  <header _ngcontent-jeq-c35="" aria-label="Header area" class="site-header side-padding">
    <a _ngcontent-jeq-c35="" href="#main_content" class="skip-link">Skip to content</a>
    <h1 _ngcontent-jeq-c35="" class="sr-only">My App Heading</h1>
    <nav _ngcontent-jeq-c35="" aria-label="Main navigation">
      ...
    </nav>
  </header>
</myapp-header>
<router-outlet _ngcontent-jeq-c37="" aria-label="routing tag" class="ng-star-inserted"></router-outlet>
<ng-component _nghost-jeq-c46="" class="ng-star-inserted">
// component
<myapp-footer _ngcontent-jeq-c37="" aria-label="footing" _nghost-jeq-c36="">
  <footer _ngcontent-jeq-c36="" role="contentinfo" aria-label="Footer area" class="side-padding">
    ...
  </footer>
</myapp-footer>

为什么我不能有一个不错的明智的<header> 和<footer>，并让它们成为选择器？

【问题讨论】：

您面临的问题是什么？

您似乎对许多不同的主题感到困惑。我建议你先研究一下组件到底是什么。

【参考方案1】：

Angular 不坚持使用前缀，但建议使用它。他们在docs 中用“...它使元素名称与Custom Elements 的规范保持一致”。

如果您想摆脱前缀，只需从传递给 @Component 装饰器函数的配置对象中使用的 selector 属性中手动删除它们。

或者，在angular.json 文件中，将prefix 设置为一个空字符串，如下所示：

"prefix": ""

现在，当您使用 Angular CLI 生成新组件时，将不会应用任何前缀。

如果您在 IDE 中使用了抱怨它的 linter，那么应该有一种方法可以禁用警告。