Как использовать Angular Signals для переключения видимости моих компонентов ⇐ Html

[Anonymous]

Я знаю, что в этом конкретном случае можно использовать Angular Signals, чтобы избежать постоянного вызова функции isVisible. Но у меня нет опыта работы с этой новой функцией, и я не могу понять, что изменить в своем коде, чтобы воспользоваться преимуществами сигналов. Я вставил ниже упрощенный фрагмент своего кода, просто для общего представления.
Что мне следует изменить, чтобы это работало с Signals?
visibleSections = [];
sectionConfig = [
{
name: 'someComponent',
hidden: false
},
{
name: 'otherComponent',
hidden: false
}
];

ngOnInit() {
this.visibleSections = this.sectionConfig.filter(c => !c.hidden);
}

public isVisible(section): boolean {
return this.visibleSections.findIndex(s => s.name === section) > -1;
}

public setSectionVisibility(e: any): void {
this.sectionConfig.find(c => c.name === e.itemValue.name).hidden = e.value.findIndex(p => p === e.itemValue) === -1;
}

HTML:

#multiselect
defaultLabel="Show/hide sections"
optionLabel="title"
name="show-hide-sections"
scrollHeight="300px"
styleClass="multiselect-as-button mr-3 ml-3"
dropdownIcon="fas fa-bars rotate-90"
[options]="sectionConfig"
[(ngModel)]="visibleSections"
[displaySelectedLabel]="false"
(onChange)="setSectionVisibility($event)"
[style]="{ width: '208px' }"
[showHeader]="false"
[appendTo]="'body'">

@if (isVisible("someComponent")) {

}

@if (isVisible("otherComponent")) {

}


[EDIT]
Следуя как очень хорошим ответам ниже, так и учитывая, что я все еще использую angular 18 и не могу сейчас используйте linkedSignal, вот как я это сделал:
TS:
type Config = { name: string; hidden: boolean; };

const sectionConfig = signal([ {
name: 'someComponent',
hidden: false,
},
{
name: 'otherComponent',
hidden: false
}]);

visibleSections = computed(() => {
const sections = this.sectionConfig();
return sections.filter(s => !s.hidden);
});

public visibleSectionsFlags = computed(() => {
return this.sectionConfig()
.filter((item: any) => !item.hidden)
.map((item: any) => item.name);
});

public setSectionVisibility(e: any): void {
this.sectionConfig.update((sectionConfig: any) => {
const foundIndex = this.sectionConfig().findIndex(c => c.name === e.itemValue.name);
if (foundIndex > -1) {
sectionConfig[foundIndex].hidden = !sectionConfig[foundIndex].hidden;
}
return [...sectionConfig];
});

}

HTML:


@if (visibleSectionsFlags().includes("someComponent")) {

}


Подробнее здесь: https://stackoverflow.com/questions/793 ... components