mcpField
A
angular-deferrable

angular-deferrable

github.com/oguzhan18开发7178 次安装31 周前更新
代码仓库

关于 angular-deferrable

angular-deferrable 是面向 Angular 17+ 的延迟视图使用指南，供 Angular 开发者按需加载视图。内容示范了视口、交互和悬停触发方式。

主要功能

  1. 01Angular 17+ 延迟视图实践
  2. 02视口触发加载
  3. 03交互触发加载
  4. 04悬停触发加载

适用场景

  1. 01元素进入视口时加载视图
  2. 02用户交互后显示延迟内容
  3. 03悬停时加载提示组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-deferrable

安装后在 Claude Code 中输入/angular-deferrable确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 可延迟视图

版本： Angular 17+（2025） 标签： @defer、可延迟、懒加载

参考： 可延迟视图

最佳实践

  • 将 @defer 与 on viewport 搭配使用
@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class DashboardComponent {}
  • 将 @defer 与 on interaction 搭配使用
@Component({
  template: `
    <button (click)="showModal = true">Open</button>
    @defer (when showModal) {
      <modal-component />
    }
  `
})
export class MyComponent {}
  • 将 @defer 与 on hover 搭配使用
@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
  `
})
export class TooltipWrapper {}

评论

支持 Markdown