angular-deferrable

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Deferrable Views

Angular 可延迟视图

Version: Angular 17+ (2025) Tags: @defer, Deferrable, Lazy Loading

References: Deferrable Views

版本： Angular 17+ (2025) 标签： @defer, 可延迟, 懒加载

参考链接： 可延迟视图

Best Practices

最佳实践

Use @defer with on viewport

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class DashboardComponent {}

Use @defer with on interaction

@Component({
  template: `
    <button (click)="showModal = true">Open</button>
    @defer (when showModal) {
      <modal-component />
    }
  `
})
export class MyComponent {}

Use @defer with on hover

@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
  `
})
export class TooltipWrapper {}

配合视口可见触发使用@defer

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class DashboardComponent {}

配合交互触发使用@defer

@Component({
  template: `
    <button (click)="showModal = true">Open</button>
    @defer (when showModal) {
      <modal-component />
    }
  `
})
export class MyComponent {}

配合悬停触发使用@defer

@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
  `
})
export class TooltipWrapper {}