Question

我的应用程序的结构如下：

<body>
  <header>[...]</header>
  <main>[...]</main>
  <footer><app-footer></app-footer></footer>
</body>

由于我不需要不必要的DOM元素，因此我更喜欢将app-footer声明为属性，以便可以这样声明页面：

<body>
  <header>[...]</header>
  <main>[...]</main>
  <footer app-footer></footer>
</body>

但是，如果这样做，我在执行ng lint

时会收到以下错误消息

应将组件“ AppFooterComponent”的选择器用作元素（https://angular.io/styleguide#style-05-03）

我认为这种情况是该规则的合法例外。你同意吗？如果是这样，我如何才能将此特定组件声明为该规则的例外？

Answer 1

当您定义@Component角度时，仅允许将该组件用作html元素。如果要使用它作为元素的属性，请制作一个@Directive

import { Directive } from '@angular/core';

@Directive({
  selector: '[app-footer]'
})
export class AppFooter { 
   .....
}

Doc

Answer 2

尽管这是一种不好的做法（根据样式指南），但是您仍然可以为此特定组件禁用此ts lint规则。

为此，请在组件注释之前使用/ * tslint：disable：component-selector * /，以便组件声明如下所示：

/* tslint:disable:component-selector */
@Component({
    selector: '[app-footer]',
    templateUrl: './app-footer.component.html'
})
export class AppFooterComponent

组件“ AppFooterComponent”的选择器应用作元素

2 个答案: