canjun_wen-优快云博客

原创 Angular异步核心03，高阶映射操作符：switchMap、mergeMap、concatMap 深度解析与实战选型

本文深入解析Angular开发中RxJS的三个高阶映射操作符：switchMap、mergeMap和concatMap。它们分别用于处理"流中流"场景，核心区别在于对未完成内部Observable的处理方式：switchMap会取消旧请求只保留最新，适合搜索联想等实时响应场景；concatMap串行执行保证顺序，适用于批量提交等有序场景；mergeMap并行执行提升效率，适合多文件上传等并发需求。

2026-01-09 10:45:42 598

原创 Angular异步核心02，RxJS 核心操作符入门：map、filter、debounceTime 实战解析

本文重点介绍了RxJS在Angular中的三个核心操作符：map、filter和debounceTime。map用于数据转换，类似数组的map方法；filter用于数据筛选，只保留符合条件的值；debounceTime实现防抖功能，处理高频触发事件。文章通过实际代码示例演示了每个操作符的典型应用场景，如接口数据处理、搜索框防抖等，并强调操作符应通过pipe()方法组合使用。掌握这三个操作符能解决Angular开发中80%的异步数据处理需求，遵循"纯函数+管道式处理"原则可使代码更清晰可维

2026-01-09 10:44:26 811

原创 Angular异步核心01，再识 RxJS：Observable、Observer 与订阅的核心概念

本文深入解析RxJS在Angular中的三大核心概念。Observable作为惰性数据流容器，需订阅后才会推送多值数据；Observer通过next/error/complete回调处理数据流通知；Subscription管理订阅生命周期，支持取消订阅避免内存泄漏。文章通过生活案例类比，并结合Angular实战场景（HTTP请求、表单监听等），帮助开发者真正理解响应式编程的核心逻辑。掌握这些概念是使用RxJS操作符处理异步操作的基础。

2026-01-09 10:41:44 496

原创 Angular页面跳转07，玩转 Angular 路由懒加载：基于 loadChildren 实现极致首屏性能优化

摘要： Angular路由懒加载通过loadChildren实现模块按需加载，有效减少首屏资源体积。实现步骤包括：1) 创建带路由的独立模块（如UserModule）；2) 子模块使用RouterModule.forChild()配置路由；3) 根路由通过动态导入语法loadChildren: () => import('path').then(m => m.Module)声明懒加载。优化策略包括预加载（PreloadAllModules）、错误兜底及合理模块拆分（按业务域，避免过小）。

2026-01-08 09:38:00 619

原创 Angular页面跳转06，路由守卫 CanActivate：优雅实现路由权限控制与登录拦截

本文介绍了Angular中通过CanActivate守卫实现路由权限控制的方法。主要内容包括：1）CanActivate的基本概念和工作原理；2）基础登录拦截的实现步骤，包括创建用户服务、守卫类和路由配置；3）进阶的角色权限控制方案，通过扩展用户服务和创建角色守卫实现；4）注意事项如异步处理、守卫顺序和后端校验。文章提供了完整的代码示例，帮助开发者构建安全的单页应用路由系统。

2026-01-08 09:36:04 445

原创 Angular页面跳转05，嵌套路由实战：父子路由配置与多级路由出口全解析

本文详细介绍了Angular中嵌套路由的配置与使用，通过后台管理系统案例演示了父子路由和多级路由出口的实现方法。主要内容包括：1. 核心概念解析：父子路由的层级关系和路由出口的作用；2. 实战步骤：从组件创建到路由配置，再到模板设置；3. 常见问题解决方案；4. 最佳实践建议。文章帮助开发者掌握复杂SPA的路由管理技巧，适用于需要页面嵌套的各类应用场景。

2026-01-08 09:33:46 649

原创 Angular页面跳转04，深入理解 Angular 路由参数：ActivatedRoute 中 paramMap 与 queryParamMap 的核心区别

Angular中的paramMap和queryParamMap分别用于获取路径参数和查询参数，二者核心区别在于参数位置与用途。paramMap对应路由路径中的必填参数（如/users/:userId），需在路由配置中声明；queryParamMap则处理URL查询字符串中的可选参数（如?page=1），无需配置。开发时应根据场景选择：资源标识（如ID）用paramMap，辅助参数（如分页）用queryParamMap。

2026-01-07 15:31:18 671

原创 Angular页面跳转03，Angular 路由导航：routerLink 指令与 Router 服务 navigate 方法全解析

本文对比了Angular中两种路由导航方式：模板中的routerLink指令和组件中的Router.navigate方法。routerLink适合简单的静态导航，直接在模板中声明使用；而navigate方法则支持复杂的前置业务逻辑处理，在组件类中命令式调用。文章详细介绍了两种方式的基础语法、参数传递和相对路径处理，并提供了选型建议：静态导航优先使用routerLink，带业务逻辑的导航必须使用navigate。

2026-01-07 15:25:33 512

原创 Angular页面跳转02，一文吃透 Angular 路由配置：静态路由、动态路由与通配符路由

本文详细介绍了Angular中的三种核心路由配置方式：静态路由（固定路径）、动态路由（带参数）和通配符路由（404处理）。通过实际代码示例，展示了如何配置基础路由环境、定义静态页面路由、实现带参数的动态路由跳转与参数获取，以及设置404通配路由。重点强调了路由匹配顺序、参数获取方式（快照与订阅）以及通配路由必须最后配置等关键注意事项。这些路由技术可覆盖90%以上的Angular开发场景，是构建单页应用的基础技能。

2026-01-07 15:22:28 641

原创 Angular页面跳转01，深入浅出 Angular Router：RouterModule 配置与路由出口核心解析

本文深入解析Angular路由的两大核心概念：RouterModule配置与router-outlet路由出口。首先介绍了RouterModule的基础配置步骤，包括定义路由数组和注册路由模块，重点讲解了forRoot()与forChild()的区别。其次详细阐述了router-outlet作为路由视图容器的使用方法，包括嵌套路由和命名路由出口的实现。文章还提供了完整示例演示路由配置到渲染的流程，并总结了常见问题与注意事项。

2026-01-07 15:20:47 509

原创 Angular后端联动06，Angular 实战：基于 HttpClient 实现登录与数据列表查询

本文详细介绍了如何在Angular项目中使用HttpClient实现登录认证与数据列表查询功能。主要内容包括：1）环境配置与HttpClientModule导入；2）封装API服务处理Token自动添加和401错误拦截；3）实现登录组件表单验证和Token存储；4）构建数据列表组件实现分页查询；5）配置路由守卫保护受保护页面。文章提供了完整的代码示例和样式实现，并建议使用json-server搭建模拟接口进行测试。

2026-01-06 09:08:10 569

原创 Angular后端联动05，异步数据处理：RxJS Observable 与 Promise 的转换与应用

摘要： Angular开发中，异步数据处理常涉及Observable（RxJS）与Promise（ES6）的选择。核心区别：Observable支持多值流、取消订阅和丰富操作符，适合持续数据流（如实时搜索）；Promise适用于单次异步结果（如HTTP请求）。转换技巧： Observable转Promise：使用firstValueFrom()或lastValueFrom()（RxJS 7+），替代已废弃的toPromise()，需配合try/catch处理错误。

2026-01-06 09:05:57 775

原创 Angular后端联动04，深入浅出 Angular HTTP 拦截器：统一处理 Token 与响应

本文介绍了如何在Angular应用中实现HTTP拦截器，用于统一处理HTTP请求和响应。主要内容包括：1. 拦截器核心概念及作用，可自动添加Token请求头和统一处理错误响应；2. 具体实现步骤：创建拦截器服务，实现请求修改和错误处理逻辑；3. 在根模块注册拦截器；4. 高级技巧如排除特定请求和多拦截器顺序控制；5. 注意事项如请求对象不可变性和Token安全存储。通过拦截器可减少代码冗余，提升应用的可维护性和用户体验。

2026-01-06 09:02:33 618

原创 Angular后端联动03，深入浅出 Angular HTTP 请求：POST/PUT/DELETE 封装与 RESTful API 适配

本文详细介绍了Angular中处理POST/PUT/DELETE请求的最佳实践。首先讲解了HttpClient模块的基础配置和通用HTTP服务封装，包括错误处理机制。重点阐述了请求体的规范封装方法，包括使用TypeScript接口确保类型安全、业务模块拆分以及DELETE请求的特殊处理。文章还深入探讨了如何适配RESTful API设计规范，包括URL设计、状态码处理等核心原则。最后提供了组件中的使用示例和进阶优化建议，帮助开发者构建健壮、可维护的前端请求层，实现与后端API的高效交互。

2026-01-06 08:49:19 873

原创 Angular后端联动02，深入浅出 Angular HTTP GET 请求：参数传递、响应处理与错误捕获

本文全面讲解Angular中HTTP GET请求的开发实践。首先介绍HttpClientModule的配置和封装服务的最佳实践，然后详细说明查询参数(HttpParams)和路径参数的传递方法。重点阐述响应处理技巧，包括接口定义、类型安全和数据提取，并提供完整的错误捕获方案，涵盖全局拦截器和组件级处理。文章最后总结了核心规范：服务封装、类型安全、参数处理和分层错误机制，并给出常见避坑指南。通过本文，开发者可以掌握构建健壮、可维护的Angular HTTP请求逻辑的关键技巧。

2026-01-06 08:46:39 479

原创 Angular后端联动01，HttpClient 模块完全指南：替代 HttpModule 的优势与实战用法

本文详细介绍了Angular中HttpClientModule的核心优势与使用方法。相比被废弃的HttpModule，HttpClientModule具有类型安全、自动JSON解析、简化错误处理、拦截器机制等显著优势。文章通过具体示例展示了GET、POST、PUT/PATCH/DELETE等请求的实现方式，并深入讲解了拦截器的实战应用，包括请求头添加和全局错误处理。最后还总结了跨域问题、请求取消等注意事项。掌握HttpClientModule能显著提升Angular项目与后端API交互的效率和健壮性。

2026-01-06 08:44:49 685

原创 Angular核心机制05，玩转 Angular 依赖注入：useClass、useValue、useFactory 的灵活应用

摘要： Angular依赖注入（DI）通过useClass、useValue和useFactory三种配置实现灵活依赖管理。useClass用于类实例注入与多态替换，适合服务实现切换；useValue直接注入静态值或常量，适用于配置项和模拟数据；useFactory通过工厂函数动态创建实例，支持依赖联动和异步加载。三者分别解决类实例化、静态值绑定和复杂逻辑生成的场景需求，合理选用可显著提升代码解耦与可维护性。核心选型原则是：类替换用useClass，固定值用useValue，动态逻辑用useFactory。

2026-01-05 09:02:04 732

原创 Angular核心机制04，Angular 实战：封装 HTTP 请求与数据共享的通用数据服务

本文介绍了在Angular中创建通用数据服务的最佳实践，通过封装HTTP请求和实现数据共享提升开发效率。核心方案包括：1）使用HttpClient模块统一封装GET/POST/PUT/DELETE请求，集中处理错误和拦截；2）利用RxJS的BehaviorSubject实现组件间数据实时共享；3）遵循单一职责原则，分离数据处理与视图逻辑。文章详细演示了服务创建、请求封装、数据共享的实现步骤，并提供了防抖、缓存等进阶优化方案。这种模式有效解决了代码冗余、数据流混乱等问题，提高了应用的可维护性和扩展性。

2026-01-05 08:58:55 444

原创 Angular核心机制03，深入理解 Angular 服务注入：组件级、模块级与根级的区别与选择

本文深入解析Angular服务注入的三种级别：根级、模块级和组件级。根级注入创建全局单例，适用于共享数据和通用工具；模块级注入（尤其是懒加载模块）实现模块内数据隔离；组件级注入则为每个组件实例创建独立服务。文章通过对比表清晰展示三者的实例数量、生命周期和可见范围差异，并提供选择建议：优先考虑服务的作用域和数据共享需求，遵循"最小必要作用域"原则。同时指出常见错误和最佳实践，如优先使用providedIn语法、懒加载模块采用模块级注入等，帮助开发者避免内存泄漏和数据污染问题。

2026-01-05 08:54:59 1021

原创 Angular核心机制02，深入理解 Angular 依赖注入 (DI)：Injector 与 Provider 的核心逻辑

本文深入解析Angular依赖注入(DI)机制，从核心概念、执行流程到最佳实践全面剖析。首先阐明DI通过解耦对象创建与依赖管理带来的价值，详细讲解Token、Provider和Injector三大核心要素及其协作方式。重点分析Injector的层级体系（根/模块/组件注入器）和查找规则，对比两种Provider配置策略的优缺点。最后总结DI执行流程，列举常见问题并提供最佳实践建议，帮助开发者从底层理解Angular的依赖管理机制，设计出更健壮的应用架构。

2026-01-05 08:50:16 1121

原创 Angular核心机制01，深入理解Angular服务：@Injectable装饰器与核心作用

本文深入解析了Angular中@Injectable装饰器与服务的核心概念。服务本质上是普通TypeScript类，通过依赖注入机制实现业务逻辑复用和组件解耦。@Injectable是服务的"准入证"，使其能被DI系统识别和管理，而providedIn属性则决定服务的注入范围（推荐使用'root'实现全局单例）。文章详细阐述了服务的三大作用：跨组件数据共享、业务逻辑封装、视图与逻辑解耦，并澄清了关于服务单例性的常见误区。

2026-01-05 08:48:48 687

原创 Angular交互核心06，模板驱动表单 vs 响应式表单：场景与性能深度解析

本文对比了Angular中模板驱动表单和响应式表单的核心特性与适用场景。模板驱动表单语法简洁，适合简单静态表单（如登录、搜索框），开发效率高但性能较差；响应式表单逻辑可控，适合复杂动态表单（如订单填写、动态增删项），性能优势明显但代码量较多。性能测试显示：响应式表单在初始化速度（快30%）、变更检测（减少60%检测次数）和动态表单处理（快8倍）方面表现更优。建议根据表单复杂度选择：简单表单用模板驱动提升效率，复杂表单用响应式保证性能，也可混合使用两者。

2026-01-04 15:06:51 958

原创 Angular交互核心05，深入理解 Angular 表单状态：dirty、touched、valid 与交互反馈最佳实践

本文深入解析Angular表单状态管理，重点介绍了模板驱动表单和响应式表单中dirty、touched、valid等核心状态属性的含义及使用场景。通过对比两种表单实现方式的状态判断语法，结合实际案例演示了如何基于状态实现优雅的交互反馈，包括错误提示时机控制、样式动态绑定、异步验证处理等最佳实践。文章还针对常见问题提供解决方案，并强调合理运用表单状态可以显著提升用户体验和开发效率。掌握这些状态管理技巧，能够帮助开发者构建更专业、更友好的Angular表单应用。

2026-01-04 09:13:24 825

原创 Angular交互核心04，深入 Angular 表单验证：内置验证器与自定义验证器全解析

本文全面解析Angular表单验证的实现方式，重点介绍了响应式表单的内置验证器使用和自定义验证器开发。内容涵盖：1）Angular两种表单模式（模板驱动与响应式表单）的特点；2）7种常用内置验证器的应用场景与使用方法；3）同步/异步自定义验证器的开发规范与实现示例；4）动态验证器调整、全局验证器等高级用法；5）表单验证的最佳实践建议。文章旨在帮助开发者掌握Angular强大的表单验证体系，有效处理各类业务场景下的表单验证需求。

2026-01-04 09:10:48 919

原创 Angular交互核心03，响应式表单：FormControl、FormGroup 与 FormBuilder 全解析

本文深入解析Angular响应式表单的核心概念与使用方法。主要内容包括：1）响应式表单三大核心组件：FormControl（单个控件管理）、FormGroup（控件分组管理）和FormBuilder（简化创建）；2）详细讲解FormControl的值状态管理、验证规则设置，以及FormGroup的分组嵌套使用；3）对比原生创建与FormBuilder的优劣，提供最佳实践建议。文章强调响应式表单通过显式定义表单结构和验证规则，实现对表单状态的精准控制，具有更好的可测试性和可维护性，适合中大型项目开发。

2026-01-04 09:07:55 807

原创 Angular交互核心02，管道 Pipe 入门：玩转内置管道与自定义管道

本文详细介绍了Angular中的管道(Pipe)功能。管道是用于在模板中转换数据的纯函数，通过|符号调用，具有复用性强、代码简洁的特点。重点讲解了两种常用内置管道：UpperCasePipe(文本转大写)和DatePipe(日期格式化)，并详细说明了DatePipe的各种格式参数。文章还逐步演示了如何创建自定义管道，包括手机号脱敏管道和金额格式化管道的实现方法，以及如何处理多参数情况。最后强调了纯管道与非纯管道的区别及性能注意事项。

2026-01-04 09:05:39 825

原创 Angular交互核心01，深入理解 Angular 模板引用变量：# 变量名的核心用法与实战场景

摘要：Angular模板引用变量（#变量名）是连接模板与组件的重要工具，可简化DOM操作和组件交互。本文详细解析其语法规则、作用域及核心应用场景：1）引用DOM元素实现视图操作；2）引用子组件实现父子通信；3）配合表单控件和指令使用。强调使用注意事项：避免过度依赖、注意生命周期时机、类型安全及最佳实践。该特性在简化开发的同时需平衡便捷性与组件解耦，是Angular开发中的高效工具。

2026-01-04 09:02:06 421

原创 Angular组件联动06，深入 Angular 动态组件：基于 ComponentFactoryResolver 的完整实现指南

Angular动态组件开发指南：本文详细介绍了在Angular中实现动态组件的完整方案。主要内容包括：1) 动态组件的核心概念和适用场景（表单动态渲染、弹窗定制等）；2) 基于ComponentFactoryResolver的经典实现步骤，涵盖组件声明、容器创建、实例挂载和生命周期管理；3) 进阶技巧如依赖注入、Angular13+简化写法；4) 常见问题解决方案。文章通过完整代码示例，帮助开发者掌握动态组件的创建流程和最佳实践，特别强调了内存管理和性能优化的注意事项。

2026-01-03 10:16:54 986

原创 Angular组件联动05，组件生命周期钩子全解析：从 ngOnInit 到 ngOnDestroy

本文深入解析Angular组件生命周期钩子，从创建、渲染、更新到销毁四大阶段，详细剖析核心钩子的执行时机与应用场景。重点介绍ngOnInit作为业务逻辑入口、ngOnChanges监听输入属性变化、ngDoCheck检测引用类型内部变更、ngAfterViewInit操作DOM以及ngOnDestroy清理资源等关键环节。通过典型应用场景和避坑指南，帮助开发者合理运用生命周期钩子，避免内存泄漏和性能问题，编写更规范高效的Angular代码。掌握这些钩子能精准控制组件行为，提升应用性能和可维护性。

2026-01-03 10:12:38 1082

原创 Angular组件联动04，非父子组件通信：Service+RxJS Subject 优雅实现跨组件消息传递

本文详解Angular中非父子组件通信的最佳实践方案：Service注入+RxJS Subject。该方案利用Angular的依赖注入系统实现Service单例，通过RxJS Subject实现一对多消息分发，具有响应式、解耦、可扩展等优势。文章详细介绍了核心概念、实现步骤（创建消息服务、发送/接收消息组件）以及进阶优化技巧（处理历史消息、内存泄漏等），并总结了最佳实践要点。相比全局变量或事件冒泡方案，该方案更符合Angular设计理念，能优雅解决各种复杂组件通信场景。

2026-01-03 10:08:35 1025

原创 Angular组件联动03，子父组件通信：@Output 装饰器与 EventEmitter 事件发射实战

本文详解Angular中子组件向父组件通信的实现方案，重点介绍@Output装饰器与EventEmitter的配合使用。通过基础案例（输入框实时传递）和进阶案例（用户对象传递）演示具体实现步骤，包括子组件事件声明发射、父组件事件监听处理等核心流程。同时提供类型安全、事件命名、性能优化等最佳实践建议，帮助开发者掌握这一组件通信的标准方式。文中强调对于复杂场景应优先使用服务共享数据，避免过度事件传递，为Angular组件化开发提供实用指导。

2026-01-03 09:35:56 946

原创 Angular组件联动02，父子组件通信：@Input 装饰器传递数据与数据校验技巧

本文全面解析Angular中@Input装饰器的使用技巧，重点探讨父子组件数据传递的校验方法。首先介绍@Input基础用法，包括属性标记和模板绑定；其次分析数据校验的痛点场景，如类型不符、空值等问题；然后详细讲解多种校验技巧：通过TypeScript类型约束+默认值兜底、使用setter/getter实时校验、复杂对象接口定义、ngOnChanges批量监听以及自定义验证器函数。文章还总结了分层校验、单一职责等最佳实践，并提醒注意引用类型传递、初始化时机等常见坑点。

2026-01-03 09:33:16 645

原创 Angular组件联动01，深度解析组件嵌套、父子关系及组件树构建

Angular组件化开发的核心在于组件嵌套与通信。组件通过@Input/@Output实现父子数据传递与事件交互，形成组件树结构。视图层级与组件树构建直接影响UI渲染和变更检测流程。掌握组件间通信机制（如输入输出、服务共享等）是构建高效联动应用的关键。合理运用这些特性可实现逻辑解耦，提升代码复用性和可维护性。

2026-01-03 09:30:23 924

原创 Angular夯实根基06，深入理解 Angular ViewEncapsulation：三种模式的区别与应用选择

本文深入解析Angular的ViewEncapsulation视图封装机制，介绍其三种核心模式：Emulated（模拟封装，默认）、None（无封装）和ShadowDom（原生封装）。Emulated通过自动添加属性选择器实现样式隔离，兼容性好；None使样式全局生效，适合全局样式；ShadowDom基于原生ShadowDOM实现严格隔离，适合组件库开发。文章对比了三者的原理、表现差异，并给出选型建议：优先使用Emulated模式，全局样式用None，组件库开发用ShadowDom。同时提供了样式穿透、CS

2026-01-02 09:50:11 1000

原创 Angular夯实根基05，Angular 指令初体验：ngIf 与ngFor 的核心使用技巧

本文深入解析Angular框架中两个核心结构指令ngIf和ngFor的使用技巧。ngIf用于条件渲染元素，与[hidden]不同，它会完全移除DOM节点，提升性能；介绍了else/then分支语法和null/undefined的处理要点。ngFor用于循环渲染，重点讲解了trackBy优化性能、内置变量(index/even等)以及嵌套循环的用法。文章还解决了ngIf与ngFor的冲突问题，推荐使用<ng-container>或预先过滤数组的方案。掌握这些技巧能显著提升Angular开发效率和性

2026-01-02 09:48:33 913

原创 Angular夯实根基04，深入解析 Angular [(ngModel)]：双向数据绑定的原理与表单适配场景

本文深入解析Angular中[(ngModel)]双向数据绑定的实现原理与应用场景。作为属性绑定与事件绑定的语法糖，[(ngModel)]通过FormsModule实现视图与组件数据的双向同步。文章详细拆解了其在文本输入框、复选框、单选框、下拉框等表单元素中的适配方式，并指出使用限制：需导入FormsModule、不支持局部变量绑定、存在变更检测开销等。针对复杂表单场景，推荐使用响应式表单(FormGroup/FormControl)替代。掌握[(ngModel)]的原理与适用边界，能帮助开发者在简单表单中

2026-01-02 09:46:48 460

原创 Angular夯实根基03，事件绑定全解析：(click)与事件对象$event的实战应用

本文深入解析前端开发中(click)事件绑定与$event对象的应用。首先介绍基础语法格式，包括无参数绑定和带参数绑定的实现方式及注意事项。其次详细讲解$event对象的核心属性与方法，如target、preventDefault()等，并演示如何获取和传递事件对象。通过三个实战场景展示如何阻止默认行为、获取元素属性及实现鼠标位置精准控制。最后针对常见问题提供避坑指南，强调参数顺序一致性和事件冒泡处理的重要性。全文从基础到实战，帮助开发者掌握这一核心交互技术。

2026-01-02 09:46:42 953

原创 Angular夯实根基02，掌握 Angular 模板语法：插值表达式 {{}} 与属性绑定 [] 的核心用法

本文详细解析了Angular模板语法中插值表达式{{}}和属性绑定[]的核心区别与使用场景。插值表达式适用于纯文本渲染，支持简单表达式计算，是属性绑定的语法糖；属性绑定则用于DOM元素属性、组件传值和布尔属性绑定。关键区别在于：插值表达式绑定文本节点，属性绑定处理DOM/组件属性。最佳实践是文本用{{}}，属性用[]，避免混合使用。理解这两种基础语法是掌握Angular模板开发的关键基础。

2026-01-02 09:42:05 606

原创 Angular夯实根基01，Angular 组件入门：吃透 @Component 装饰器，掌握组件创建、注册与使用

本文深入解析Angular组件开发，重点介绍了@Component装饰器的核心功能与使用方法。文章详细讲解了组件的三大要素（模板、类、样式），剖析了@Component的selector、template、styles等关键配置项。通过对比手动创建与CLI创建两种方式，展示了组件开发的最佳实践。同时阐述了NgModule注册与独立组件的区别，并演示了父子组件间的数据传递与事件通信。最后补充了组件生命周期钩子的应用场景，为构建可复用、可维护的Angular组件提供了全面指导。

2026-01-02 09:38:55 703

原创 Angular入门启蒙05，Angular 项目目录结构深度解读：从文件作用到核心配置

本文深度解析Angular 17项目的目录结构，帮助开发者理解其组织逻辑。项目根目录包含关键配置文件：angular.json（构建配置）、package.json（依赖管理）、tsconfig系列（TypeScript编译规则）。src目录是业务代码核心，包含入口文件main.ts、index.html、全局样式、静态资源和环境配置。app目录存放业务组件、路由配置和全局设置，建议按功能模块组织。文章对比了Angular 17独立组件模式与早期模块模式的差异，并提供了两种app目录组织方案。通过理解这种工

2026-01-01 21:18:57 818

Yaak-2025.8.2-x64-setup-windows.exe

空空如也