组件“ AppFooterComponent”的选择器应用作元素
[英]The selector of the component “AppFooterComponent” should be used as element
问题描述
The structure of my application is as follows : 
我的应用程序的结构如下：
<body>
<header>[...]</header>
<main>[...]</main>
<footer><app-footer></app-footer></footer>
</body>
As I don't want unnecessary DOM elements, I prefer declaring app-footer as an attribute so I can declare the page like this : 由于我不需要不必要的DOM元素，因此我更喜欢将app-footer声明为属性，以便可以这样声明页面：
<body>
<header>[...]</header>
<main>[...]</main>
<footer app-footer></footer>
</body>
But if I do so, I get the following error message when executing ng lint 但是如果这样做，执行ng lint时会收到以下错误消息
The selector of the component "AppFooterComponent" should be used as element ( https://angular.io/styleguide#style-05-03 )
I think that this case is a legitimate exception to the rule. 我认为这种情况是该规则的合理例外。 Do you agree? 你同意吗？ If so, how can I declare this specific component as an exception for this rule? 如果是这样，我如何才能将此特定组件声明为该规则的例外？
2 个解决方案
解决方案1
1 2018-07-03 15:02:47
when you define a @Component angular allows to use that component as html element only. 定义@Component angular允许将该组件仅用作html元素。 If you want to use it as an attribute on an element then make a @Directive 如果要使用它作为元素的属性，请执行@Directive
import { Directive } from '@angular/core';
@Directive({
selector: '[app-footer]'
})
export class AppFooter {
.....
}
解决方案2
1 2019-05-01 20:08:41
Although it is considered a bad practice (according to the styleguide), you still can disable this specific ts lint rule for this specific component. 尽管这是一种不好的做法（根据样式指南），但是仍然可以为此特定组件禁用此ts lint特定规则。
to do so, use /* tslint:disable:component-selector */ right before component annotation so that component declaration looks as follows: 为此，请在组件注释之前使用/ * tslint：disable：component-selector * /，以便组件声明如下所示：
/* tslint:disable:component-selector */
@Component({
selector: '[app-footer]',
templateUrl: './app-footer.component.html'
})
export class AppFooterComponent
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.