随笔分类 - Angular
摘要：40行代码实现zonejs 之前看到过别人写过一个40行代码实现Vue中的Reactivity功能，觉得蛮好玩的。Angular的变更检测是基于Zonejs的。市面上也有一些文章介绍zonejs,我也读过好多遍Zonejs的源码。所以，我也来了个40行代码实现ZoneJs的。这个是我的github。
阅读全文
摘要：ZoneJs 源码解析 ZoneJs是什么，它能干什么，它是怎么做到的？ Zone是为js的执行提供了一个共享的数据上下文。为js函数执行维护了一个逻辑上的调用栈。 同时提供了对于函数执行方法的拦截，在函数执行前后，添加一些通用的逻辑(例如日志，异常处理)。 统一的任务模型，提供对于宏任务/微任务/
阅读全文
摘要：BaseHref 以及前端路由的问题 Base Href 是什么？ MDN, 说的直白一点就是，这个站点里面所有的访问主站的资源文件，都会在路由前面加上这个base href,包括*js,scss,image,ajax,......**。 如果一个DOM 里面有多个这样的base,只有第一个会起作用
阅读全文
摘要：Signal in Angular Angular 16+ 开始引入了 Signal,按照官方的说法是为了替代 zone。当第一眼看到signal,我曾遐想翩翩，立刻想到了 Vue 中的Ref,又想到了mobx。然而，Angular 官方给的例子居然用了一个count,一个计数的例子。它居然不用对象
阅读全文
摘要：Angular Form 的一些问答 如何理解FormGroup, FormArray, FormControl? 它们可以映射成对象，数组，原生字段 FormGroup 上的invalid 字段是如何获取整个表单的状态的？ 首先，它的状态是存在于它内部的Status字段。 其次，每单它内部的一个节
阅读全文
摘要：微前端中路由的跳转 针对基座与子应用都是Angular 的场景，实现应用间的路由跳转 基座往子应用的跳转 首先在路由中要定义一个空组件来承接子路由，可以在基座路由表中添加如下路由 { path: 'subapp', children: [ { path: '**', component: Empty
阅读全文
摘要：Angular ngZone 源码解析 ngZone 源码中有几个常用的方法，属性，这里做一个整理与总结 Zone.js简介 ZoneJs 职责 拦截异步任务的调度 封装回调函数用于异常处理以及异步操作中zone的跟踪 提供往zone中添加数据的方法 提供上下文特定的最后一帧错误处理 拦截阻塞方法
阅读全文
摘要：源码解析 default_iterable_differ.ts 源码路径： packages/core/src/change_detection/differs/default_iterable_differ.ts 数据结构 IterableChangeRecord 这个是数组中每个元素的封装。注意
阅读全文
摘要：Angular 性能篇三 懒渲染(OnPush) vs 独立渲染(detach). 先抛问题。 针对独立渲染的组件调用detectChanges(),Angular 的组件树如何做 CD? ngDoCheck 能否作为判断组件参与 CD 的指标？ Angular 中如何做到与 React 一样的 s
阅读全文
摘要：Angular 编译器 ViewEngine vs ivy ViewEngine 也称为 renderer2,从 release4 发布。ivy 新一代的编译器，Angular9 作为默认编译器， 为什么 Angular 要推出 ivy? 提高性能，减少打包的 bundle 体积。 这两种编译器的差
阅读全文
摘要：如何在全局创建一个 ViewContainerRef? Angular 中的 Component,Template 都得存在于 VD 中的一个 ViewContainer 里面。在基于 CDK 的 overlay 通过编程的方式来打开一个 template 的时候，需要指定一个 ViewContai
阅读全文
摘要：ng-content vs ng-template 相同点 在组件之间传递模板 不同点 Content 只能传递一层，不可以跨多层级组件传递。 Content 可以理解为是实例，ngTemplate 可以理解为是类，也就是说 Content 只能是一个，template 可以传递给 ngFor,变多
阅读全文
摘要：Angular Form 总观 先给总结，再谈细节 ReactForm, Template driven Form 的差异： ReactForm: 需要我们自行定义 FormControl,适用于数据结构不变，验证很方便，数据流刷新时同步的。 Template driven Form: 不需要我们自
阅读全文
摘要：Angular Form Reactive Form vs Template-Driven Reactive Form 需要我们自己创建FormControl,FormGroup,FormArray的对象，然后将FormControl绑定到 html 上的 Form 上，FormControl绑定到
阅读全文
摘要：这篇我们再次聊聊 Angular 的 CD 参考文档 Zone vs ngZone zone.js, 它是 js 异步执行的上下文。凡事通过zone.run(func),都是在 zone 的上下文中。 zone.js, 它通过封装了一些常见的异步操作的方法，例如 setTimeout/xhr/pro
阅读全文
摘要：这篇文章记录一些 Angular 中遇到的有意思的东西 Angular 生命周期函数 创建过程 constructor → ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ngAfterContentChecked → ngAfte
阅读全文
摘要：ResizeObserver 的介绍 这个 pollyfill 是用来提供监测目标元素或者页面刷新的一种观察者工具。当目标元素的 clientwidth/height,offsetWidth/Height, 发生变化，或者页面上有动画或者窗体 resize,都会促发回调函数通知观察者。介绍几个类 R
阅读全文
