Angular
关注
分享
扫一扫
文章平均质量分 62
Angular知识点的总结、平时遇到的一些问题及解决方案。
江小虫儿
该吃吃，该喝喝，该学学。
展开
-
Angular 变化检测及解决 Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has change
最近遇到了一个问题：最终在这里找到了解决方案：https://angular.io/errors/NG0100。原创 2022-12-02 23:10:16 · 3715 阅读 · 0 评论 -
对 scroll 的认知和探索
由于浏览器对于滚动 scrollLeft 在 RTL 中的含义并不一致，CdkScrollable的scrollTo方法对浏览器原生scrollTo方法进行了规范化：left 和 right 总是指滚动容器的左侧和右侧，而与布局方向无关。第三，当元素上绑定了CdkScrollable指令，该指令会调用scrollDispatcher的register方法，将该scrollable引用及它对应的滚动事件订阅作为键值对注册到scrollContainers字典中。：读取或设置一个元素的内容垂直滚动的距离。原创 2022-11-02 22:03:04 · 1075 阅读 · 0 评论 -
sortablejs的使用实践
sortablejs 是一个强大的JavaScript拖拽库。今天介绍一下sortablejs在Angular项目中的基本使用。原创 2022-10-16 23:42:55 · 8201 阅读 · 1 评论 -
sortablejs 实践
在Angular项目中使用sortablejs实现拖拽。原创 2022-10-13 23:04:11 · 837 阅读 · 0 评论 -
IntersectionObserver 交叉观察者 -- 观察目标元素与可视区域的交叉区域
IntersectionObserver 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。IntersectionObserver接收两个参数，分别是callback和options。options可选，有默认值。原创 2022-10-11 22:54:17 · 466 阅读 · 0 评论 -
Angular CDK Scrolling 之 ViewportRuler（源码阅读）
ViewportRuler 是一种可注入的服务，用于衡量浏览器视口的范围原创 2022-06-19 23:34:56 · 331 阅读 · 0 评论 -
Angular路由的一些思考与验证
1. 使用replaceUrl:true来解决实际问题。 2. ActivatedRoute 查询路由数据时什么时候用params?什么时候用queryParams?什么时候用snapshot快照？ 3. Router什么时候用navigate？什么时候用navigateUrl?原创 2022-05-15 17:12:50 · 940 阅读 · 1 评论 -
Angular 路由小记
Route属性说明pathMatch路径匹配策略，为 “prefix” 或 “full” 之一。默认为“prefix”。默认情况下，路由器会从左边开始检查 URL 中的各个元素，以查看此 URL 是否匹配给定的路径，遇到任何一个匹配的，就停止。比如，‘/team/11/user’ 能匹配 ‘team/:id’。路径匹配策略 “full” 表示与整个 URL 匹配。重定向空路径路由时，执行此操作很重要。否则，因为空路径是任何 URL 的前缀，所以路由器即使在导航到重定向目标时也会进行重原创 2022-05-12 23:39:14 · 378 阅读 · 0 评论 -
Angular原生动态加载器与Portal
Angular 动态加载组件的两种方式。 Angular动态加载内嵌视图。 Angular cdk 之 Portal 支持动态加载组件或视图。原生动态加载器与portal的区别是什么？原创 2022-05-12 21:35:20 · 781 阅读 · 0 评论 -
Angular cdk 之 Overlay 源码分析
文章目录一、Overlay简介二、Overlay 源码阅读2.1 OverlayConfig 浮层配置2.2 OverlayContainer 浮层容器2.3 Overlay 服务2.3.1 Overlay服务对外提供了两个方法2.3.2 创建浮层2.3.3 create方法具体做了什么？2.4 OverlayRef2.4.1 OverlayReference2.4.2 attach 方法具体做了哪些事情？2.5 OverlayPositionBuilder （overlay定位策略原创 2022-05-12 20:59:57 · 1949 阅读 · 0 评论 -
灵活可配置可拖拽的栅格布局 angular-gridster2
最近新认识了一个包，跟大家分享一下：angular-gridster2。它是一个功能强大的，支持动态配置，支持拖拽改变卡片大小，支持拖拽变更页面布局的网格布局组件。https://www.npmjs.com/package/angular-gridster2...原创 2022-05-12 20:25:09 · 1326 阅读 · 1 评论 -
Angular之ViewContainerRef、ViewRef、EmbeddedViewRef、TemplateRef
文章目录1. ViewContainerRef 视图容器2. EmbeddedViewRef 嵌入式视图3. ViewRef 视图（1）视图 view（2）视图树4. 实际应用 -- ngTemplateOutlet指令的实现1. ViewContainerRef 视图容器ViewContainerRef 可以将一个或多个视图附着到组件中的容器。abstract class ViewContainerRef { abstract element: ElementRef abstract inj原创 2022-05-03 01:39:25 · 1222 阅读 · 0 评论 -
NgZone：runOutsideAngular和run结合使用，减少变化检测，提高性能
Angular变化检测只会由运行于 NgZone 中的异步操作触发。 runOutsideAngular和run结合使用，减少变化检测，提高性能。 会触发变化检测的行为有：(1) 任何浏览器事件，比如click、keydown等。(2) setInterval() 、setTimeout。 (3) http请求。原创 2022-03-07 20:29:32 · 2013 阅读 · 0 评论 -
Angular报错：Can‘t bind to ‘ngModel‘ since it isn‘t a known property of ‘xxx‘
Angular报错：Can't bind to 'ngModel' since it isn't a known property of 'xxx'。原因是没有导入...原创 2022-02-15 22:29:24 · 1321 阅读 · 0 评论 -
Angular测试中 fakeAsync、tick、flush、flushMicrotasks
fakeAsync包装一个函数，以便在 fakeAsync Zone 中执行。tick为fakeAsync Zone 中的计时器模拟异步时间流逝。比如 tick(1000) 模拟时间流逝1秒。通过flush`清空宏任务队列，并返回本应该经过的毫秒数`，来为 fakeAsync Zone 中的计时器模拟异步时间流逝。flushMicrotasks刷新所有未完成的微任务...原创 2022-02-11 13:09:32 · 760 阅读 · 0 评论 -
Angular激活路由前解析数据、从路由中获取信息
Resolve接口定义了开始导航时调用 `resolve()` 路由器在最终激活路由之前等待数据解析。ActivatedRoute允许访问与该组件关联的路由的信息。用于遍历 `RouterState` 树并从节点提取信息。原创 2022-01-20 00:34:25 · 1248 阅读 · 0 评论 -
Angular 组件Dom测试
Angular组件Dom测试中常用的一下方法及类，比如：createComponent()、ComponentFixture、nativeElement、DebugElement、By.css()等...原创 2022-01-03 17:50:31 · 2653 阅读 · 0 评论 -
Angular 组件类测试
Angular测试组件的基础知识 - 测试组件类，包括测试没有依赖的组件类，测试有依赖的组件类，以及测试@Input()和测试@Output()...原创 2022-01-03 14:31:01 · 805 阅读 · 0 评论 -
Angular中的 EventEmitter、@Output、@Input、OnChanges
EventEmitterl类及使用 EventEmitter 自定义事件。父子组件之间的数据传递及共享。监听@Input属性变化的两种方式：setter和ngOnChanges钩子。SimpleChanges对象等...原创 2022-01-03 13:32:32 · 2075 阅读 · 0 评论 -
实现会拐弯的时间轴
纯css实现会拐弯且能自适应屏幕宽度的时间轴。原创 2021-12-19 15:14:15 · 3411 阅读 · 10 评论 -
Angular启动报错 ngcc operation failed
ngcc operation failed原创 2021-12-19 14:50:45 · 1292 阅读 · 8 评论 -
Angular 生命钩子、setTimeout、http请求的执行顺序
文章目录Angular 生命钩子的执行顺序Angular 生命钩子、setTimeout、http请求等混合后的执行顺序Angular 生命钩子的执行顺序https://angular.cn/guide/lifecycle-hooks#lifecycle-hooksAngular 生命钩子、setTimeout、http请求等混合后的执行顺序 ngOnChanges(changes: SimpleChanges) { console.log('1 ngOnChanges');原创 2021-12-15 13:21:48 · 1528 阅读 · 0 评论 -
The selector should be prefixed by “app“
问题组件选择器报错：The selector should be prefixed by "app"解决在tslint.ts文件中配置component-selector "component-selector": [ true, "element", "app", "kebab-case" ],原创 2020-11-16 23:24:01 · 566 阅读 · 0 评论 -
手动创建组件报错 experimentalDecorators
问题手动创建组件，报错： Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)解决VSCode 左下角的“设置”，Settings，搜索“experiment原创 2020-11-16 23:11:19 · 297 阅读 · 0 评论