有没有办法在 Angular v19 独立组件中禁用延迟加载？

Question

在旧版本的 Angular 中，我们曾经拥有基于模块的应用程序，它会加载一个模块一次，即使您关闭该模块导出的组件 - 它也不会再次加载该模块，即使您打开了再次组件。但现在我们正在慢慢迁移到独立组件 - 我面临着关于延迟加载“功能”的有趣行为。在下面的 GIF 中，通过单击下拉箭头 - 我正在渲染同一组件的三个实例，它们具有其图像和样式。正如您所看到的，在一微秒内，布局最初没有设置样式，并且滚动条出现并在组件的样式完全加载后消失。

如果您查看网络选项卡，我们可以看到它会加载该组件的图像一次，并在每次尝试渲染该组件时加载该组件的 css 文件：

因此，正如您所看到的，我的目标是防止这种行为一遍又一遍地发生，理想情况下，我希望在加载页面时首先加载所有内容。这是延迟加载组件的代码：

<div class="hive-info">
  <img [src]="'beehive' | svgPath" class="hive-icon" />
  <div class="hive-name">{{ hiveName }}</div>
  <div class="hive-weight">{{ hiveWeight }}</div>
  <action-icon iconPath="chart-icon" iconClass="img standard-img" iconTitle="Chart"  />
</div>

@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) {
    <hive-info [hiveName]="hive.name" [hiveWeight]="hive.weight" />
  }
}

@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"}
  ];
}

Answer 1

您可以尝试使用

hidden

属性，它不会破坏 DOM 元素。

<div [hidden]="!isDropdownToggled">
  @for (hive of hives; track hive.name) {
    <hive-info [hiveName]="hive.name" [hiveWeight]="hive.weight" />
  }
</div>

如果由于大量 DOM 元素而遇到任何性能问题，您可以使用

@defer

，它具有

@placeholder

，您可以使用它来显示微调器，直到元素成功加载。

使用@defer

延迟加载

@if (isDropdownToggled) {
  @defer {
    @for (hive of hives; track hive.name) {
      <hive-info [hiveName]="hive.name" [hiveWeight]="hive.weight" />
    }
  } @placeholder {
    <p>Loading...</p>
  }
}