[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fecology":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fecology":945,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fecology":967},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":941,"stem":942,"id":943,"extension":944},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fecology","生态集成","Angular 官方维护路由、HTTP、表单、动画等；UI 与状态扩展由社区与官方 Material 团队提供。涵盖官方\u002F半官方库、常用第三方库、与 Vue\u002FReact 生态对照、选型建议与常见坑。","技能小册",[12,13],"angular","ecology","2026-07-12",false,{"type":17,"value":18,"toc":929},"minimark",[19,22,37,41,53,56,185,188,273,281,285,310,517,530,534,642,653,656,693,696,770,773,830,833,852,855,858,925],[20,21,8],"h1",{"id":8},[23,24,25,26,31,32,36],"p",{},"Angular 官方维护路由、HTTP、表单、动画等；UI 与状态扩展由社区与官方 Material 团队提供。见 ",[27,28,30],"a",{"href":29},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fstate","状态管理","、",[27,33,35],{"href":34},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fproject","工程化","。",[38,39,40],"h2",{"id":40},"核心概念",[23,42,43,44,48,49,52],{},"与 Vue\u002FReact「核心库很小、生态自由拼装」不同，Angular 走的是**「全家桶」**路线：路由、HTTP、表单、依赖注入、动画、国际化都在 ",[45,46,47],"code",{},"@angular\u002F*"," 官方包里，版本随核心库统一发布（",[45,50,51],{},"ng update"," 一次性升级）。这带来了更强的一致性与官方支持，但也意味着替换其中某一层（如换路由库）成本更高。",[38,54,55],{"id":55},"官方与半官方",[57,58,59,72],"table",{},[60,61,62],"thead",{},[63,64,65,69],"tr",{},[66,67,68],"th",{},"库",[66,70,71],{},"用途",[73,74,75,89,101,113,125,137,149,161,173],"tbody",{},[63,76,77,86],{},[78,79,80],"td",{},[27,81,85],{"href":82,"rel":83},"https:\u002F\u002Fangular.dev\u002Fguide\u002Frouting",[84],"nofollow","Angular Router",[78,87,88],{},"路由",[63,90,91,98],{},[78,92,93],{},[27,94,97],{"href":95,"rel":96},"https:\u002F\u002Fangular.dev\u002Fguide\u002Fhttp",[84],"HttpClient",[78,99,100],{},"HTTP",[63,102,103,110],{},[78,104,105],{},[27,106,109],{"href":107,"rel":108},"https:\u002F\u002Fangular.dev\u002Fguide\u002Fforms",[84],"Angular Forms",[78,111,112],{},"响应式\u002F模板驱动表单",[63,114,115,122],{},[78,116,117],{},[27,118,121],{"href":119,"rel":120},"https:\u002F\u002Fmaterial.angular.dev\u002F",[84],"Angular Material",[78,123,124],{},"Material Design 组件",[63,126,127,134],{},[78,128,129],{},[27,130,133],{"href":131,"rel":132},"https:\u002F\u002Fmaterial.angular.dev\u002Fcdk\u002Fcategories",[84],"Angular CDK",[78,135,136],{},"无样式行为组件（虚拟滚动、拖拽等）",[63,138,139,146],{},[78,140,141],{},[27,142,145],{"href":143,"rel":144},"https:\u002F\u002Frxjs.dev\u002F",[84],"RxJS",[78,147,148],{},"异步流",[63,150,151,158],{},[78,152,153],{},[27,154,157],{"href":155,"rel":156},"https:\u002F\u002Fngrx.io\u002F",[84],"NgRx",[78,159,160],{},"可选全局状态",[63,162,163,170],{},[78,164,165],{},[27,166,169],{"href":167,"rel":168},"https:\u002F\u002Fangular.dev\u002Fguide\u002Fanimations",[84],"Angular Animations",[78,171,172],{},"声明式动画",[63,174,175,182],{},[78,176,177],{},[27,178,181],{"href":179,"rel":180},"https:\u002F\u002Fangular.dev\u002Fguide\u002Fi18n",[84],"Angular i18n",[78,183,184],{},"官方国际化",[38,186,187],{"id":187},"常用第三方",[57,189,190,199],{},[60,191,192],{},[63,193,194,196],{},[66,195,68],{},[66,197,198],{},"说明",[73,200,201,213,225,237,249,261],{},[63,202,203,210],{},[78,204,205],{},[27,206,209],{"href":207,"rel":208},"https:\u002F\u002Fprimeng.org\u002F",[84],"PrimeNG",[78,211,212],{},"企业级 UI 组件",[63,214,215,222],{},[78,216,217],{},[27,218,221],{"href":219,"rel":220},"https:\u002F\u002Fgithub.com\u002Fngx-translate\u002Fcore",[84],"ngx-translate",[78,223,224],{},"国际化（亦可使用内置 i18n）",[63,226,227,234],{},[78,228,229],{},[27,230,233],{"href":231,"rel":232},"https:\u002F\u002Ftailwindcss.com\u002F",[84],"Tailwind CSS",[78,235,236],{},"工具类样式（按文档配置 PostCSS）",[63,238,239,246],{},[78,240,241],{},[27,242,245],{"href":243,"rel":244},"https:\u002F\u002Fnx.dev\u002F",[84],"Nx",[78,247,248],{},"monorepo 与任务编排，Angular 生态常用",[63,250,251,258],{},[78,252,253],{},[27,254,257],{"href":255,"rel":256},"https:\u002F\u002Fjsverse.github.io\u002Ftransloco\u002F",[84],"Transloco",[78,259,260],{},"另一种社区 i18n 方案",[63,262,263,270],{},[78,264,265],{},[27,266,269],{"href":267,"rel":268},"https:\u002F\u002Fvalor-software.com\u002Fngx-bootstrap\u002F",[84],"ngx-bootstrap",[78,271,272],{},"Bootstrap 风格组件封装",[23,274,275,276,280],{},"选型时关注 ",[277,278,279],"strong",{},"Angular 版本兼容性","（peerDependencies）与包体积；升级 Angular major 版本前，先确认第三方库是否已适配。",[38,282,284],{"id":283},"示例引入-angular-material-与按需模块","示例：引入 Angular Material 与按需模块",[286,287,292],"pre",{"className":288,"code":289,"language":290,"meta":291,"style":291},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","ng add @angular\u002Fmaterial\n","bash","",[45,293,294],{"__ignoreMap":291},[295,296,299,303,307],"span",{"class":297,"line":298},"line",1,[295,300,302],{"class":301},"sbgvK","ng",[295,304,306],{"class":305},"s_sjI"," add",[295,308,309],{"class":305}," @angular\u002Fmaterial\n",[286,311,315],{"className":312,"code":313,"language":314,"meta":291,"style":291},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","import { Component } from \"@angular\u002Fcore\";\nimport { MatButtonModule } from \"@angular\u002Fmaterial\u002Fbutton\";\nimport { MatCardModule } from \"@angular\u002Fmaterial\u002Fcard\";\n\n@Component({\n  standalone: true,\n  imports: [MatButtonModule, MatCardModule],\n  template: `\n    \u003Cmat-card>\n      \u003Cbutton mat-raised-button color=\"primary\">确认\u003C\u002Fbutton>\n    \u003C\u002Fmat-card>\n  `,\n})\nexport class ConfirmCardComponent {}\n","ts",[45,316,317,350,373,396,403,419,436,455,466,472,478,484,492,501],{"__ignoreMap":291},[295,318,319,323,327,331,334,337,341,344,347],{"class":297,"line":298},[295,320,322],{"class":321},"sVHd0","import",[295,324,326],{"class":325},"sP7_E"," {",[295,328,330],{"class":329},"su5hD"," Component",[295,332,333],{"class":325}," }",[295,335,336],{"class":321}," from",[295,338,340],{"class":339},"sjJ54"," \"",[295,342,343],{"class":305},"@angular\u002Fcore",[295,345,346],{"class":339},"\"",[295,348,349],{"class":325},";\n",[295,351,353,355,357,360,362,364,366,369,371],{"class":297,"line":352},2,[295,354,322],{"class":321},[295,356,326],{"class":325},[295,358,359],{"class":329}," MatButtonModule",[295,361,333],{"class":325},[295,363,336],{"class":321},[295,365,340],{"class":339},[295,367,368],{"class":305},"@angular\u002Fmaterial\u002Fbutton",[295,370,346],{"class":339},[295,372,349],{"class":325},[295,374,376,378,380,383,385,387,389,392,394],{"class":297,"line":375},3,[295,377,322],{"class":321},[295,379,326],{"class":325},[295,381,382],{"class":329}," MatCardModule",[295,384,333],{"class":325},[295,386,336],{"class":321},[295,388,340],{"class":339},[295,390,391],{"class":305},"@angular\u002Fmaterial\u002Fcard",[295,393,346],{"class":339},[295,395,349],{"class":325},[295,397,399],{"class":297,"line":398},4,[295,400,402],{"emptyLinePlaceholder":401},true,"\n",[295,404,406,409,413,416],{"class":297,"line":405},5,[295,407,408],{"class":325},"@",[295,410,412],{"class":411},"sGLFI","Component",[295,414,415],{"class":329},"(",[295,417,418],{"class":325},"{\n",[295,420,422,426,429,433],{"class":297,"line":421},6,[295,423,425],{"class":424},"skxfh","  standalone",[295,427,428],{"class":325},":",[295,430,432],{"class":431},"syTEX"," true",[295,434,435],{"class":325},",\n",[295,437,439,442,444,447,450,453],{"class":297,"line":438},7,[295,440,441],{"class":424},"  imports",[295,443,428],{"class":325},[295,445,446],{"class":329}," [MatButtonModule",[295,448,449],{"class":325},",",[295,451,452],{"class":329}," MatCardModule]",[295,454,435],{"class":325},[295,456,458,461,463],{"class":297,"line":457},8,[295,459,460],{"class":424},"  template",[295,462,428],{"class":325},[295,464,465],{"class":339}," `\n",[295,467,469],{"class":297,"line":468},9,[295,470,471],{"class":305},"    \u003Cmat-card>\n",[295,473,475],{"class":297,"line":474},10,[295,476,477],{"class":305},"      \u003Cbutton mat-raised-button color=\"primary\">确认\u003C\u002Fbutton>\n",[295,479,481],{"class":297,"line":480},11,[295,482,483],{"class":305},"    \u003C\u002Fmat-card>\n",[295,485,487,490],{"class":297,"line":486},12,[295,488,489],{"class":339},"  `",[295,491,435],{"class":325},[295,493,495,498],{"class":297,"line":494},13,[295,496,497],{"class":325},"}",[295,499,500],{"class":329},")\n",[295,502,504,507,511,514],{"class":297,"line":503},14,[295,505,506],{"class":321},"export",[295,508,510],{"class":509},"sbsja"," class",[295,512,513],{"class":301}," ConfirmCardComponent",[295,515,516],{"class":325}," {}\n",[23,518,519,522,523,525,526,529],{},[45,520,521],{},"ng add"," 会自动完成主题、字体、动画模块等配置，比手动接入更省心；但仅 ",[45,524,322],{}," 用到的子模块（",[45,527,528],{},"MatButtonModule"," 而非整包），避免打包体积膨胀。",[38,531,533],{"id":532},"与-vue-react-生态对照","与 Vue \u002F React 生态对照",[57,535,536,552],{},[60,537,538],{},[63,539,540,543,546,549],{},[66,541,542],{},"能力",[66,544,545],{},"Angular",[66,547,548],{},"Vue",[66,550,551],{},"React",[73,553,554,573,587,601,615,629],{},[63,555,556,559,564,570],{},[78,557,558],{},"CLI",[78,560,561],{},[45,562,563],{},"@angular\u002Fcli",[78,565,566,569],{},[45,567,568],{},"create-vue"," \u002F Vite",[78,571,572],{},"Vite \u002F CRA（维护模式）",[63,574,575,578,581,584],{},[78,576,577],{},"官方 UI",[78,579,580],{},"Material",[78,582,583],{},"无（Element Plus 等）",[78,585,586],{},"无（MUI 等）",[63,588,589,592,595,598],{},[78,590,591],{},"元框架",[78,593,594],{},"Angular SSR",[78,596,597],{},"Nuxt",[78,599,600],{},"Next.js",[63,602,603,606,609,612],{},[78,604,605],{},"官方状态管理",[78,607,608],{},"无强制（Signal 足够多数场景）",[78,610,611],{},"无强制（Pinia 事实标准）",[78,613,614],{},"无强制（Redux\u002FZustand 等）",[63,616,617,620,623,626],{},[78,618,619],{},"官方表单",[78,621,622],{},"Reactive\u002FTemplate Forms",[78,624,625],{},"无（VeeValidate 等社区方案）",[78,627,628],{},"无（React Hook Form 等）",[63,630,631,634,636,639],{},[78,632,633],{},"官方 HTTP 客户端",[78,635,97],{},[78,637,638],{},"无（axios 等）",[78,640,641],{},"无（axios\u002Ffetch 等）",[23,643,644,645,648,649,652],{},"Angular 的「官方全家桶」特点使新项目",[277,646,647],{},"接入成本更低","（少做选型决策），但也意味着",[277,650,651],{},"脱离官方路线","（如换掉 RxJS）改造成本更高。",[38,654,655],{"id":655},"最佳实践",[657,658,659,666,673,680,683],"ul",{},[660,661,662,663,665],"li",{},"新项目优先使用 ",[45,664,521],{}," 而非手动安装第三方库，官方 schematics 会自动处理配置文件改动。",[660,667,668,669,672],{},"UI 库选型前确认是否支持 ",[277,670,671],{},"Standalone Components","（新项目默认无 NgModule）。",[660,674,675,676,679],{},"国际化优先评估官方 ",[45,677,678],{},"@angular\u002Flocalize","；仅当需要运行时切换语言（无需重新构建）才考虑 ngx-translate \u002F Transloco。",[660,681,682],{},"大型多包项目考虑 Nx，统一 lint、测试、依赖图分析与增量构建。",[660,684,685,686,688,689,692],{},"升级 Angular 版本时用 ",[45,687,51],{}," 而非手动改 ",[45,690,691],{},"package.json","，它会执行迁移 schematics。",[38,694,695],{"id":695},"常见坑",[57,697,698,711],{},[60,699,700],{},[63,701,702,705,708],{},[66,703,704],{},"现象",[66,706,707],{},"常见原因",[66,709,710],{},"处理",[73,712,713,724,741,756],{},[63,714,715,718,721],{},[78,716,717],{},"升级 Angular 后第三方 UI 库报错",[78,719,720],{},"库未适配新 major，peerDependencies 冲突",[78,722,723],{},"升级前查库的 changelog \u002F issue，或延后升级",[63,725,726,729,736],{},[78,727,728],{},"Material 组件打包体积异常大",[78,730,731,732,735],{},"导入了整个 ",[45,733,734],{},"@angular\u002Fmaterial","，未按模块拆分",[78,737,738,739],{},"按组件导入子模块，如 ",[45,740,528],{},[63,742,743,746,749],{},[78,744,745],{},"ngx-translate 首屏闪烁「键名」",[78,747,748],{},"翻译文件异步加载，渲染在加载完成前发生",[78,750,751,752,755],{},"使用 ",[45,753,754],{},"APP_INITIALIZER"," 预加载翻译，或显示 loading 态",[63,757,758,761,764],{},[78,759,760],{},"Tailwind 类被 Angular 视图封装样式隔离",[78,762,763],{},"ViewEncapsulation 默认作用域样式与全局工具类冲突",[78,765,766,767],{},"确认 Tailwind 配置的 content 扫描范围，必要时调整 ",[45,768,769],{},"encapsulation",[38,771,772],{"id":772},"生态选型速查",[57,774,775,785],{},[60,776,777],{},[63,778,779,782],{},[66,780,781],{},"需求",[66,783,784],{},"建议",[73,786,787,795,803,814,822],{},[63,788,789,792],{},[78,790,791],{},"快速搭建企业中后台",[78,793,794],{},"Angular Material + ng add",[63,796,797,800],{},[78,798,799],{},"高度定制视觉风格",[78,801,802],{},"PrimeNG 或 CDK + 自绘样式",[63,804,805,808],{},[78,806,807],{},"多语言站点",[78,809,810,811,813],{},"官方 ",[45,812,678],{},"（构建期）；需运行时切换选 ngx-translate\u002FTransloco",[63,815,816,819],{},[78,817,818],{},"大型 monorepo",[78,820,821],{},"Nx + Angular",[63,823,824,827],{},[78,825,826],{},"复杂动画交互",[78,828,829],{},"Angular Animations，复杂场景可结合 CSS\u002FWeb Animations API",[38,831,832],{"id":832},"延伸阅读",[657,834,835,840,845],{},[660,836,837,839],{},[27,838,30],{"href":29},"：Service + Signal 与 NgRx 的取舍",[660,841,842,844],{},[27,843,35],{"href":34},"：CLI、构建与部署",[660,846,847,851],{},[27,848,850],{"href":849},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fforms","表单","：Reactive Forms 深入",[38,853,854],{"id":854},"参考文献",[23,856,857],{},"以下链接在编写时均可正常访问：",[57,859,860,869],{},[60,861,862],{},[63,863,864,867],{},[66,865,866],{},"资料",[66,868,198],{},[73,870,871,883,893,905,915],{},[63,872,873,880],{},[78,874,875],{},[27,876,879],{"href":877,"rel":878},"https:\u002F\u002Fangular.dev\u002F",[84],"Angular 文档",[78,881,882],{},"总览",[63,884,885,890],{},[78,886,887],{},[27,888,121],{"href":119,"rel":889},[84],[78,891,892],{},"组件库",[63,894,895,902],{},[78,896,897],{},[27,898,901],{"href":899,"rel":900},"https:\u002F\u002Fgithub.com\u002FPatrickJS\u002Fawesome-angular",[84],"Awesome Angular",[78,903,904],{},"社区清单（英文）",[63,906,907,912],{},[78,908,909],{},[27,910,245],{"href":243,"rel":911},[84],[78,913,914],{},"Monorepo 工具",[63,916,917,922],{},[78,918,919],{},[27,920,169],{"href":167,"rel":921},[84],[78,923,924],{},"动画",[926,927,928],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":291,"searchDepth":352,"depth":352,"links":930},[931,932,933,934,935,936,937,938,939,940],{"id":40,"depth":352,"text":40},{"id":55,"depth":352,"text":55},{"id":187,"depth":352,"text":187},{"id":283,"depth":352,"text":284},{"id":532,"depth":352,"text":533},{"id":655,"depth":352,"text":655},{"id":695,"depth":352,"text":695},{"id":772,"depth":352,"text":772},{"id":832,"depth":352,"text":832},{"id":854,"depth":352,"text":854},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fframe\u002FAngular\u002Fecology","knowledge\u002Fknowledge\u002Fbooklet\u002Fframe\u002FAngular\u002Fecology.md","md",{"items":946},[947,951,955,957,959,963],{"path":948,"title":949,"description":950,"category":10,"score":421},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fsignals\u002Fbasics","Signal 基础","Signals 是 Angular 16 引入的响应式原语：可读写的 signal、派生的 computed、副作用 effect。用于组件内状态与跨组件细粒度更新，涵盖 API、input signal、与变更检测的关系、最佳实践与常见坑。",{"path":952,"title":953,"description":954,"category":10,"score":421},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fsignals\u002Frxjs","RxJS 互操作","Angular 内置 RxJS 处理异步流（HTTP、HttpClient、路由事件、FormControl 的 valueChanges 等）。Signal 适合同步\u002F短链路状态；长生命周期流仍常用 Observable。涵盖 async 管道、toSignal\u002FtoObservable、常用操作符、最佳实践与常见坑。",{"path":849,"title":850,"description":956,"category":10,"score":421},"Angular 提供 响应式表单（Reactive Forms） 与 模板驱动表单（Template-driven）。复杂表单推荐 Reactive Forms（模型在 TypeScript 中，易测试）。涵盖 FormGroup\u002FFormArray、Typed Forms、自定义校验器、最佳实践与常见坑。",{"path":29,"title":30,"description":958,"category":10,"score":421},"Angular 没有强制单一状态库：服务 + DI、Signal、RxJS 即可覆盖多数场景；大型应用可选用 NgRx。涵盖选型、服务作为状态容器、跨组件共享、NgRx 与 SignalStore、常见坑。",{"path":960,"title":961,"description":962,"category":10,"score":421},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fhttp","HTTP 与数据","Angular 通过 HttpClient（@angular\u002Fcommon\u002Fhttp）发起 HTTP 请求，返回 RxJS Observable。见 RxJS 互操作、依赖注入。",{"path":964,"title":965,"description":966,"category":10,"score":421},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fperformance\u002Fchange-detection","变更检测","Angular 在数据变化后更新 DOM 的过程称为 变更检测（Change Detection）。理解默认策略、Zone.js 机制、OnPush 与 Signal 协同，有助于性能调优。运行时技巧见 runtime。",{"series":968,"title":12,"items":969,"index":405,"prev":1008,"next":1009},"booklet\u002Fframe\u002Fangular",[970,974,976,978,982,986,987,989,991,993,996,1000,1002,1004],{"path":971,"title":972,"date":973,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fbasics","Angular 基础","2020-03-07",{"path":948,"title":949,"date":975,"pinned":15},"2026-06-12",{"path":964,"title":965,"date":977,"pinned":15},"2023-10-12",{"path":979,"title":980,"date":981,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fcomponents","组件与模板","2021-07-11",{"path":983,"title":984,"date":985,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fdi","依赖注入","2021-01-24",{"path":7,"title":8,"date":14,"pinned":15},{"path":849,"title":850,"date":988,"pinned":15},"2025-05-26",{"path":960,"title":961,"date":990,"pinned":15},"2024-12-27",{"path":34,"title":35,"date":992,"pinned":15},"2021-09-01",{"path":994,"title":88,"date":995,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Frouter","2023-02-04",{"path":997,"title":998,"date":999,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Fperformance\u002Fruntime","运行时优化","2022-11-01",{"path":952,"title":953,"date":1001,"pinned":15},"2026-04-06",{"path":29,"title":30,"date":1003,"pinned":15},"2025-04-29",{"path":1005,"title":1006,"date":1007,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fangular\u002Ftest","测试","2021-08-25",{"path":983,"title":984,"date":985,"pinned":15},{"path":849,"title":850,"date":988,"pinned":15}]