为什么Angular坚持为组件使用自定义前缀

Question

我指的是https://angular.io/guide/styleguide#02-07和过梁在CCD_ 1选择器上的位置。

我想在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>

然后将实际的CCD_ 3和CCD_。

这给了我一个次优可访问性树，其中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>，并使它们成为选择器？

Answer 1

Angular不坚持使用前缀，但建议使用前缀。他们在文档中用">。。。它使元素名称与"自定义元素"的规范保持一致；。

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

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

"prefix": ""

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

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