The selector of the component “AppFooterComponent” should be used as element
Question
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 :
<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
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 answers
solution1
1 2018-07-03 15:02:47
when you define a @Component angular allows to use that component as html element only. If you want to use it as an attribute on an element then make a @Directive
import { Directive } from '@angular/core';
@Directive({
selector: '[app-footer]'
})
export class AppFooter {
.....
}
solution2
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.
to do so, use /* tslint:disable:component-selector */ right before component annotation so that component declaration looks as follows:
/* tslint:disable:component-selector */
@Component({
selector: '[app-footer]',
templateUrl: './app-footer.component.html'
})
export class AppFooterComponent
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.