Логи c презентационного компонента Angular?

Question

Существует специальный компонент app-badge, который создает цветные значки и настраиваемый текст:

@Component({
    selector: 'app-badge',
    templateUrl: './badge.component.html',
    styleUrls: ['./badge.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BadgeComponent implements OnInit {
    @Input() badge: Badge;
    @Input() cssClass: string;
    @Output() onSelect = new EventEmitter<Badge>();
    public isSelected: boolean;

    constructor() {}

    ngOnInit() {}

    public select() {
        this.onSelect.emit(this.badge);
        this.isSelected = !this.isSelected;
    }
}

Шаблон:

<span (click)="select()" class="badge p-2 mb-1 mr-2" [ngClass]="{ 'primary-color-dark': isSelected, 'badge-unchecked': !isSelected }">{{
    badge.label
}}</span>

Я использую это компонент внутри другого <app-sidebar>:

<app-badge
    *ngFor="let pagesize of paginationService.getPageSizeOptions()"
    [badge]="{ label: pagesize, value: pagesize }"
    [cssClass]="'primary'"
    (onSelect)="setPageSize($event)"
></app-badge>

Вроде неплохо, но я столкнулся с проблемой, куда писать два логи c case:

1. Установить только один badge active
2. Установить любой значок как активный

Итак, мне не нужен лог c установки значков в родительском компоненте <app-sidebar>. Я хочу инкапсулировать это внутри itdelf.

Я не уверен, возможно, моя структура компонентов неправильная, поэтому у меня есть проблемы.

Answer 1

Когда существует несколько экземпляров значка приложения и вы хотите указать c состояния. Тогда рекомендуется поместить переменную, содержащую это состояние, например:

@Component({
    selector: 'app-badge',
    templateUrl: './badge.component.html',
    styleUrls: ['./badge.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BadgeComponent implements OnInit {
    @Input() badge: Badge;
    @Input() cssClass: string;
    @Output() onSelect = new EventEmitter<Badge>();
    public isSelected: boolean;
    active:false;

    constructor() {}

    ngOnInit() {}
    public onSetActiveProperty(value){
       this.active=value;
       // now do something with the newly set value
    }
    public select() {
        this.onSelect.emit(this.badge);
        this.isSelected = !this.isSelected;
    }
}

Это дает свойство для установки значения и, при желании, что-то с этим сделать, например, изменить класс et c .