Есть ли способ отключить отложенную загрузку в автономных компонентах Angular v19? ⇐ CSS

[Anonymous]

В старых версиях Angular, где раньше были приложения на основе модулей, он загружал модуль один раз, и даже если вы закроете компоненты, экспортируемые этим модулем, он не будет загружать этот модуль снова, даже если вы открыл компонент еще раз. Но теперь, когда мы медленно переходим на автономные компоненты, я столкнулся с интересным поведением, касающимся «функции» отложенной загрузки. В GIF-изображении ниже, щелкнув стрелку раскрывающегося списка, я визуализирую три экземпляра одного и того же компонента, у которого есть свои изображения и стили. Как видите, в течение микросекунды макет изначально не имеет стиля, а полоса прокрутки появляется и исчезает после полной загрузки стилей компонента.


Итак, как вы можете видеть, моя цель — предотвратить повторение такого поведения снова и снова. В идеале я хотел бы загрузить все это изначально, когда страница загружается. Вот код компонента, который загружается отложенно:


{{ hiveName }}
{{ hiveWeight }}



@Component({
selector: 'hive-info',
imports: [SvgPathPipe, ActionIconComponent],
templateUrl: './hive-info.component.html',
styleUrl: './hive-info.component.scss'
})
export class HiveInfoComponent {
@Input() hiveName: string = 'Beehive 1';
@Input() hiveWeight: string = '20 kg'
}

А вот как этот компонент используется в другом компоненте:
@if (isDropdownToggled) {
@for (hive of hives; track hive.name) {

}
}

@Component({
selector: 'hive-group',
imports: [ActionIconComponent, SvgPathPipe, FormsModule, HiveInfoComponent],
templateUrl: './hive-group.component.html',
styleUrl: './hive-group.component.scss'
})
export class HiveGroupComponent {
@Input() groupName: string = '';

isEditing: boolean = false;
isDropdownToggled: boolean = false;
editableGroupName: string = '';

onEditClick(): void {
this.isEditing = true;
this.editableGroupName = this.groupName;
}

onConfirmClick(): void {
// TODO: send request to back-end to update group name (emit event with new group name to the parent component)
this.groupName = this.editableGroupName;
this.isEditing = false;
}

onCancelClick(): void {
this.isEditing = false;
}

toggleDropdown(): void {
this.isDropdownToggled = !this.isDropdownToggled;
}

hives = [
{name: "Hive 1", weight: "20 kg"},
{name: "Hive 2", weight: "15 kg"},
{name: "Hive 3", weight: "25 kg"}
];
}



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