У меня ошибка в angular2 и машинописном тексте. Имя класса AccordionGroup должно заканчиваться суффиксом Component. Он не останавливает выполнение, но показывает ошибку. Я реализовал аккордеон в angular2 и машинописном тексте. Вот мой код. Пожалуйста, помогите мне заранее спасибо.
import {Component, Input, OnDestroy} from '@angular/core';
@Component({
selector: 'accordion',
template:'<ng-content></ng-content>'
})
export class Accordion {
groups: Array<AccordionGroup> = [];
addGroup(group: AccordionGroup): void {
this.groups.push(group);
}
closeOthers(openGroup: AccordionGroup): void {
this.groups.forEach((group: AccordionGroup) => {
if (group !== openGroup) {
group.isOpen = false;
}
});
}
removeGroup(group: AccordionGroup): void {
const index = this.groups.indexOf(group);
if (index !== -1) {
this.groups.splice(index, 1);
}
}
}
@Component({
selector: 'accordion-group',
template: `
<div class="errors-cont" [ngClass]="{'panel-open': isOpen}">
<div class="acc-header" (click)="toggleOpen($event)">
<ng-content select="error-header"></ng-content>
</div>
<div class="acc-desc" [hidden]="!isOpen">
<ng-content select="error-body"></ng-content>
</div>
</div>
`
})
export class AccordionGroup implements OnDestroy {
private _isOpen: boolean = false;
@Input() heading: string;
@Input()
set isOpen(value: boolean) {
this._isOpen = value;
if (value) {
this.accordion.closeOthers(this);
}
}
get isOpen() {
return this._isOpen;
}
constructor(private accordion: Accordion) {
this.accordion.addGroup(this);
}
ngOnDestroy() {
this.accordion.removeGroup(this);
}
toggleOpen(event: MouseEvent): void {
event.preventDefault();
this.isOpen = !this.isOpen;
}
}
2 ответа
Согласно руководству по стилю здесь: https://angular.io/guide/styleguide#style -02-03
Добавьте к имени символа обычный суффикс (например,
Component
,Directive
,Module
,Pipe
илиService
) для вещей этого типа.
Так что если вы измените название компонентов AccordionGroup
на AccordionGroupComponent
, проблема будет решена. Это относится ко всем вашим сервисам и компонентам.
.eslintrc.json
Я использовал это
"rules": {
"@angular-eslint/component-class-suffix": [
"error",
{
"suffixes": [
"Page",
"Component"
]
}
]
}
Похожие вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.